Sorting jQuery Interactions of Multiple Instances, Each With Unique IDs

Question

Hello.

I'm expanding on what used to be a pretty simple jQuery accordion script, and I've made it so that multiple accordions can be placed on the page, each with its own unique ID. The trouble is, any interaction with the accordion functionality (expanding one of the panels while collapsing all others, or using the expand/collapse all link) affects ALL of the accordions on the page. I don't know how to get each one to "mind its own business."

Also (and this is a bigger issue), it's completely incompatible with Internet Explorer. Which is really odd. I thought that jQuery was supposed to be cross-browser bulletproof...?

Anyway, here's the HTML markup followed by the jQuery function:

<h1>accordion 1</h1>

<div class="ui-accordion">
    <div class="expand"></div>
    <div class="icon-24-pencilPaper"><a href="#1">panel 1a</a><span onclick="javascript:alert('hello');"></span></div>
    <div class="ui-accordion-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque risus mauris. Nullam lorem eros, sollicitudin ut rutrum in, sollicitudin tristique nisi. Mauris euismod dui amet.
    </div>
    <div class="icon-24-binoculars"><a href="#2">panel 2a</a><span onclick="javascript:alert('hello');"></span></div>
    <div class="ui-accordion-content">
        Nullam laoreet imperdiet felis et faucibus. Aenean vitae iaculis mauris. Quisque semper semper nunc, eu cursus tortor sagittis eget. Etiam vel condimentum velit. Vivamus mollis laoreet amet.
    </div>
    <div class="icon-24-person"><a href="#3">panel 3a</a><span onclick="javascript:alert('hello');"></span></div>
    <div class="ui-accordion-content">
        Proin sit amet nunc quis eros facilisis pulvinar. Morbi scelerisque tellus vel nisl mollis pretium. Maecenas sagittis, leo eget adipiscing iaculis, sapien arcu ultrices velit, et auctor sed.
    </div>
</div>

<h1>accordion 2</h1>

<div class="ui-accordion">
    <div class="expand"></div>
    <div class="icon-24-arrowUp"><a href="#4">panel 1b</a><span onclick="javascript:alert('hello');"></span></div>
    <div class="ui-accordion-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque risus mauris. Nullam lorem eros, sollicitudin ut rutrum in, sollicitudin tristique nisi. Mauris euismod dui amet.
    </div>
    <div class="icon-24-tools"><a href="#5">panel 2b</a><span onclick="javascript:alert('hello');"></span></div>
    <div class="ui-accordion-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque risus mauris. Nullam lorem eros, sollicitudin ut rutrum in, sollicitudin tristique nisi. Mauris euismod dui amet.
    </div>
    <div class="icon-24-question"><a href="#6">panel not 2b</a><span onclick="javascript:alert('hello');"></span></div>
    <div class="ui-accordion-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque risus mauris. Nullam lorem eros, sollicitudin ut rutrum in, sollicitudin tristique nisi. Mauris euismod dui amet.
    </div>
</div>

-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
<!--
$(document).ready(function(){
    // append classes and id's
    $('html').find('.ui-accordion').each(function(i) {
        $(this).attr('id', 'accordion-' + (i+1));
    });
    $('html').find('.expand').each(function(i) {
        $(this).attr('id', 'expand-collapse-' + (i+1));
    });
    $('div[class^="icon-"]').prepend('<span class="ui-icon"></span>').find('span[onclick]').addClass('seeAll').html('see all');
    $('div[class^="icon-"] a').addClass('title').prepend('<span class="divider"></span><span class="icon"></span>');
    $('div[class^="icon-"]').addClass('ui-accordion-header').addClass('ui-state-default').find('.ui-icon').addClass('ui-icon-triangle-1-e');
    $('div[class^="icon-"]:first').removeClass('ui-state-default').addClass('ui-state-active').find('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
    $('.ui-accordion-content').addClass('ui-widget-content');
    $('.slidingColumns').each(function(i) {
        $(this).attr('id', 'slidingColumns-' + (i+1));
    });
    $('.ui-tabs-panel ul').find('li').each(function(i) {
        $(this).addClass('col-' + (i+1));
    });
    $('.ui-tabs-panel ul li a span:first-of-type').addClass('text');
    $('.ui-tabs-panel ul li a span:last-of-type').addClass('link').html('Read more &raquo;');

    // hide all sections
    $('div[id^="accordion-"] div.ui-accordion-content').hide();
    // show the first section
    $('div[id^="accordion-"] div.ui-accordion-content:first').show();
    // set state of expand/collapse button
    $('div[id^="expand-collapse-"]').append('Expand All<span></span>');

    // actions taken upon clicking any ui-accordion-header
    // set animation speed
    var animationSpeed = 500;
    // this var will be used to tell the system whether or not other sections will respond to clicking on a ui-accordion-header
    var closeOthers = true;
    // check which sections are open
    function checkOpen() {
        // how many sections are open
        var openCount = $('div[id^="accordion-"] div.ui-accordion-content:visible').length;
        // how many sections are there
        var totalCount = $('div[id^="accordion-"] div.ui-accordion-content').length;
        // set closeOthers var based on if there are 1 or 0 sections open
        if (openCount < 2) closeOthers = true;
        // change the text in the expand link based on if there are more or less than half of the sections open
        if (openCount > totalCount / 2) {
            $('div[id^="expand-"]').html('Collapse');
        }
        else {
            $('div[id^="expand-"]').html('Expand');
        }
        $('div[id^="expand-"]').append(' All<span></span>');
    }
    $('div[id^="accordion-"] div.ui-accordion-header').click( function() {
        // set checkSection to the section next to the ui-accordion-header clicked
        var checkSection = $(this).next();
        // if the section is open, close it, and call checkOpen
        if(checkSection.is(':visible')) {
            checkSection.slideUp(animationSpeed, checkOpen);
            $(this).removeClass('ui-state-active').addClass('ui-state-default').find('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
            return false;
        }
        // if the section is closed and closeOthers is true, close all other open sections
        else {
            if (closeOthers) {
                $('div[id^="accordion-"] div.ui-accordion-content:visible').slideUp(animationSpeed);
                $('.ui-accordion-header').removeClass('ui-state-active').addClass('ui-state-default').find('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
            }
            // open the section and call checkOpen
            checkSection.slideDown(animationSpeed, checkOpen);
            $(this).removeClass('ui-state-default').addClass('ui-state-active').find('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
            return false;
        }
    });
    // actions taken upon clicking the expand link
    $('div[id^="expand-"]').click( function() {
        // if the expand link's text is 'expand all', set closeOthers to false, open all sections and call checkOpen
        if ($(this).hasClass('expand')) {
            closeOthers = false;
            $('div[id^="accordion-"] div.ui-accordion-content').slideDown(animationSpeed, checkOpen);
            $('.ui-accordion-header').removeClass('ui-state-default').addClass('ui-state-active').find('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
            $(this).removeClass('expand').addClass('collapse');
        }
        // if the expand link's text is 'collapse all', set closeOthers to true, hide all sections, and call checkOpen
        else if ($(this).hasClass('collapse')) {
            closeOthers = true;
            // the 1 prevents nasty flickering in some browsers
            $('div[id^="accordion-"] div.ui-accordion-content').slideUp(animationSpeed, checkOpen);
            $('.ui-accordion-header').removeClass('ui-state-active').addClass('ui-state-default').find('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
            $(this).removeClass('collapse').addClass('expand');
        }
        return false;
    });
});
//-->
</script>

And here's a link to where it can be viewed in action (as long as you don't use IE): http://www.tomryandesign.com/dev/accordion.html

Any help would be greatly appreciated.

Answer 1

I think the key to your problem is in the selection of which accordion sections you want to close. You have:

 $('div[id^="accordion-"] div.ui-accordion-content:visible').slideUp(animationSpeed);

When you do this code, you are selecting ALL accordion sections which obey this pattern, not just the ones for the current accordion control. You need to limit the selection to the context of the current accordion.

Instead of:

$('div[id^="accordion-"] div.ui-accordion-content:visible')

Use something along the lines of:

$(this).parent().children('div[id^="accordion-"] div.ui-accordion-content:visible')