Loading ...

accordion template | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » accordion template
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Edit navigation item

Required The name that will appear in the space navigation.
Required
Required
Required The url can point to an internal or external web page.
 
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

accordion template

Subscribe to RSS
  • 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:

    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

  • Answered

    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....

  • Answered

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

     

Page 1 of 1 (7 items)