Dowemo


Question:

I'm using Jquery Accordion to show and hide certain divs. There's also a "Show All"/"Expand All" button. Everything works fine, except for when I click on the header of section 1 and then click on header of Section 2, Section 1 remains expanded. How do I make it collapse when another one is open whilst retaining the show all and hide all functionality? I have tried multiple answers on StackOverFlow, jquery forums and fiddles. Each one of them seem to be missing one thing or the other. Can someone please help me?

This is a fiddle that is almost close to what I want: http://jsfiddle.net/apd8526c/

This is what it is doing:

var headers = $('#accordion .accordion-header');


var contentAreas = $('#accordion .ui-accordion-content ').hide();


var expandLink = $('.accordion-expand-all');



// add the accordion functionality


headers.click(function() {


    var panel = $(this).next();


    var isOpen = panel.is(':visible');



    // open or close as necessary


    panel[isOpen? 'slideUp': 'slideDown']()


        // trigger the correct custom event


        .trigger(isOpen? 'hide': 'show');



    // stop the link from causing a pagescroll


    return false;


});



// hook up the expand/collapse all


expandLink.click(function(){


    var isAllOpen = $(this).data('isAllOpen');



    contentAreas[isAllOpen? 'hide': 'show']()


        .trigger(isAllOpen? 'hide': 'show');


});



// when panels open or close, check to see if they're all open


contentAreas.on({


    // whenever we open a panel, check to see if they're all open


    // if all open, swap the button to collapser


    show: function(){


        var isAllOpen = !contentAreas.is(':hidden');   


        if(isAllOpen){


            expandLink.text('Collapse All')


                .data('isAllOpen', true);


        }


    },


    // whenever we close a panel, check to see if they're all open


    // if not all open, swap the button to expander


    hide: function(){


        var isAllOpen = !contentAreas.is(':hidden');


        if(!isAllOpen){


            expandLink.text('Expand all')


            .data('isAllOpen', false);


        } 


    }


});



Best Answer:


Check this working code. I have added

    <!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


    <title></title>


    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>


    <link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />


    <script type="text/javascript">


        $(document).ready(function () {


            var headers = $('#accordion .accordion-header');


            var contentAreas = $('#accordion .ui-accordion-content ').hide();


            var expandLink = $('.accordion-expand-all');



            // add the accordion functionality


            headers.click(function () {


                 $('#accordion .ui-accordion-content:visible')['slideUp']().trigger('hide');


                var panel = $(this).next();


                var isOpen = panel.is(':visible');



                // open or close as necessary


                panel[isOpen ? 'slideUp' : 'slideDown']()


                    // trigger the correct custom event


                    .trigger(isOpen ? 'hide' : 'show');



                // stop the link from causing a pagescroll


                return false;


            });



            // hook up the expand/collapse all


            expandLink.click(function () {


                var isAllOpen = $(this).data('isAllOpen');



                contentAreas[isAllOpen ? 'hide' : 'show']()


                    .trigger(isAllOpen ? 'hide' : 'show');


            });



            // when panels open or close, check to see if they're all open


            contentAreas.on({


                // whenever we open a panel, check to see if they're all open


                // if all open, swap the button to collapser


                show: function () {


                    var isAllOpen = !contentAreas.is(':hidden');


                    if (isAllOpen) {


                        expandLink.text('Collapse All')


                            .data('isAllOpen', true);


                    }


                },


                // whenever we close a panel, check to see if they're all open


                // if not all open, swap the button to expander


                hide: function () {


                    var isAllOpen = !contentAreas.is(':hidden');


                    if (!isAllOpen) {


                        expandLink.text('Expand all')


                        .data('isAllOpen', false);


                    }


                }


            });


        });



    </script>


    <style>


        body {


            font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";


            font-size: 62.5%;


        }



        .accordion-expand-holder {


            text-align: center;


            padding: 10px;


        }


    </style>


</head>


<body>


    <p class="accordion-expand-holder">


        <a class="accordion-expand-all" href="#">Expand all</a>


    </p>


    <div id="accordion" class="ui-accordion ui-widget ui-helper-reset">



        <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">


            <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>


            Section 1


        </h3>


        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">


            <p>


                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer


            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit


            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut


            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.


            </p>


        </div>


        <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">


            <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>


            Section 2


        </h3>


        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">


            <p>


                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer


            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit


            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut


            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.


            </p>


        </div>


        <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">


            <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>


            Section 3


        </h3>


        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">


            <p>


                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer


            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit


            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut


            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.


            </p>


        </div>


    </div>


</body>


</html>




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs