Tri des interactions jQuery de plusieurs instances, chacune ayant un identifiant unique

Question

Je développe ce qui était auparavant un accordéon jQuery assez simple script, et j'ai fait en sorte que plusieurs accordéons puissent être placés sur la page, chacun avec son propre ID unique. Le problème est que toute interaction avec la fonctionnalité d'accordéon (développer l'un des panneaux tout en réduisant tous les autres, ou utiliser le lien développer/réduire tous) affecte TOUS les accordéons sur la page. Je ne sais pas comment faire pour que chacun d'entre eux "s'occupe de ses affaires".

En outre (et c'est un problème plus important), il est totalement incompatible avec Internet Explorer. Ce qui est vraiment étrange. Je pensais que jQuery était censé être à l'épreuve des navigateurs... ?

Bref, voici le code HTML suivi de la fonction jQuery :

<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"></script>

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

Et voici un lien vers l'endroit où l'on peut le voir en action (pour autant que vous n'utilisiez pas IE) : http://www.tomryandesign.com/dev/accordion.html

Toute aide serait grandement appréciée.

Answer 1

Je pense que la clé de votre problème réside dans la sélection des sections de l'accordéon que vous souhaitez fermer. Vous avez :

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

Lorsque vous effectuez ce code, vous sélectionnez TOUTES les sections de l'accordéon qui obéissent à ce modèle, et pas seulement celles du contrôle en accordéon actuel. Vous devez limiter la sélection au contexte de l'accordéon actuel.

Au lieu de :

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

Utilisez quelque chose du genre :

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