For full documentation on the Mobify Bellows module, visit us on Github.


1. Select Your Content

First, open mobify.konf in your text editor and find the template that you want to put your accordion on. Use the following sample carousel function as a basis to get you started.

...
'templateName': 'product',
'accordion': function(context) {
    var $items = $('.product-content-subtitle');

    return {
        'accordionName': 'x-product-description',
        'items': $items.map(function(i, item) {
            var $item = $(item);

            return {
                heading: $item.find('.heading'),
                content: $item.find('.content')
            }
        })
    };
},
...

Select: a collection of the Product's sub-sections of content, such as Description, Forward, About the Author, etc.

  • e.g. var $items = $('.product-content-subtitle');

Return: an object to be used in the template that describes each of the product's sub-sections of content.

  • 'accordionName': a string to define the CSS class that identifies this accordion
  • 'items': a collection of objects, describing the heading and content for each accordion section

2. Display the Content In Your Template

In the corresponding template file, you will have to display the content you selected the Konf. Use the following example as a guideline.

{<main}
    {#content}
        <div class="{accordionName} m-bellows">
            {#items}
                <li class="m-item">
                    <h3 class="m-header">
                        {heading}
                    </h3>

                    <div class="m-content">
                        <div class="m-inner-content">
                            {content}
                        </div>
                    </div>
                </li>
            {/items}
        </div>
    {/content}
{/main}

NOTE: The HTML structure is very important, especially the elements .m-bellows, .m-item, .m-header, .m-content, .m-inner-content - they are required for the module's JavaScript and CSS to work properly.


3. Initialize the Accordion in JavaScript

In the scripts section of your template file, you will have to include the accordion module and initialize it.

{<scripts}
    {_SUPER_}

    <!-- include the Bellows module -->
    <script src="http://cdn.mobify.com/modules/bellows/0.3.3/bellows.min.js"></script>

    <!-- initialize the carousel -->
    {%script}
        (function($) {
            $('.m-bellows').bellows();
        })(Mobify.$);
    {/script}
{/scripts}

4. Add the Base Accordion CSS

In your CSS, you will need to add the base accordion styles.

Download the Bellows CSS: Zip File

If you are using Compass/Sass, you will need to create a new Sass file for your styles. To do this, start by creating a new file at:

/src/scss/modules/_accordion.scss

And copy in the styles you want from the accordion module.

Then, you need to make sure your new Sass file gets compiled into your project. Go into /src/scss/_modules.scss and add it there:

// Show content as multiple up blocks with margins
@import "modules/grid";

// Styles for Accordion
@import "modules/accordion";

Now, your accordion CSS will be included into your project.

Last Edited