All geek questions in one place

Sort jQuery interactions of multiple instances, each with unique identifiers

I am expanding what used to be a fairly simple jQuery script accordion, and I made it possible for a few accordions to be placed on the page, each with its own unique identifier. The problem is that any interaction with the functionality of the accordion (expanding one of the panels when minimizing all the others or using the expand / collapse all link) affects ALL accordions on the page. I don’t know how to make everyone “understand their business”.

Also (and this is a big problem), it is completely incompatible with Internet Explorer. Which is really strange. I thought jQuery should be cross-browser bulletproof ...?

Anyway, here is 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"></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 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 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 is a link to where you can view it in action (if you are not using IE): http://www.tomryandesign.com/dev/accordion.html

Any help would be greatly appreciated.

+3
source share
1 answer

I think the key to your problem is choosing the sections of the accordion that you want to close. You have:

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

When you make this code, you select ALL sections of the accordion that obey this template, and not just those that are used for the current accordion. You need to limit the selection to the context of the current accordion.

Instead:

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

Use something line by line:

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

Source: https://habr.com/ru/post/1767607/

More articles:


All Articles