accordion template | Communifire Support

Does anyone in this community has developed a accordion widget/template to be used in pagebuilder?

Hi Paul,

I have written a piece of code below which you can use in "Raw HTML" widget to achieve that:

HTML:

    <div id="accordionCustom">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionCustom" href="#Item1Body">
                    <span class="pull-right"><i class="icon-chevron-up"></i></span>
                    Item 1 
                </a>

            </div>
            <div id="Item1Body" class="accordion-body collapse in">
                <div>
                    <div class="accordion-inner">Item 1 Content Item 1 Content Item 1 Content Item 1 Content Item 1 Content Item 1 Content </div>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionCustom" href="#Item2Body">
                    <span class="pull-right"><i class="icon-chevron-down"></i></span>
                    Item 2 
                </a>

            </div>
            <div id="Item2Body" class="accordion-body collapse">
                <div>
                    <div class="accordion-inner">Item 2 Content Item 2 Content Item 2 Content Item 2 Content Item 2 Content Item 2 Content </div>
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionCustom" href="#Item3Body">
                    <span class="pull-right"><i class="icon-chevron-down"></i></span>
                    Item 3
                </a>
            </div>
            <div id="Item3Body" class="accordion-body collapse">
                <div>
                    <div class="accordion-inner">Item 3 Content Item 3 Content Item 3 Content Item 3 Content Item 3 Content Item 3 Content Item 3 Content Item 3 Content </div>
                </div>
            </div>
        </div>
    </div>
    <script>

        var customCode = function () {
            var $accordianBody = $('div.accordion-body');

            $accordianBody.on('shown',
                function() {
                    $(this).parent("div").find(".icon-chevron-down").removeClass("icon-chevron-down")
                        .addClass("icon-chevron-up");

                });

            $accordianBody.on('hidden',
                function() {
                    $(this).parent("div").find(".icon-chevron-up").removeClass("icon-chevron-up")
                        .addClass("icon-chevron-down");
                });
        }();
    </script>

Will appear like this:

Thanks,
Raghav

HI Raghav,

Tks a lot, works perfect but next question is: how can i combine this accordion with content widget/template. Example:

• In the first accordion (item 1) i want to display the users in a specific place
• In item 2 i want to display the latest files un that space
• in item 3 i want to display the latest events in that space

For each of above i can use specific pagebuilder widgets and templates, but how can i copy this into the accordion?

Hi Paul,

Here are guides for creating accordion templates for the Content List and People widgets:

• Accordion Icon List Template 
• Accordion Featured Users Template 

Add the templates and CSS overrides to your site, then you can select the templates when you add a Content List or People widget to a Page Builder page. Let us know if you need any help.

Grace

Hi Paul,

I am adding more details to what Grace mentioned in the previous reply.

You can add a custom css class

.noMarginBottom{margin-bottom: 0px;}

in CSS Overrides: /admin/settings/manage-css-overrides

then, add multiple widgets using the template Grace mentioned:

Set the "noMarginBottom" custom CSS class to those widgets:

After that, the club of Accordions will look like this:

Thanks,
Raghav

Ok let me play with this the next days....

i have created this and work perfect. Thank you both!