CODEWITHSUNDEEP
javascriptjqueryjquery-ui
DeA
DeA

Reputation: 1918

In jquery accordion, how to make sure when you click on one header, the other one closes?

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);
        } 
    }
});

Upvotes: 0

Views: 913

Answers (1)

Vindhyachal Kumar
Vindhyachal Kumar

Reputation: 1794

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>

Upvotes: 1

Related Questions