jQuery - accordion open item individually

Navigation
0

As I set up the accordion plugin of jquery-ui so that when I click on an item it does not close the others, for example, when I click it it opens the clicked and closes the others but I want it when I click on some which is open is still open, how do I do that?

Code so far: 

<script>
    $(function () {
        $("#accordion").accordion();
    });
</script>
<div id="accordion">
    <h3>Section 1</h3>
    <div>
        texto 2
    </div>
    <h3>Section 2</h3>
    <div>
        texto 1
    </div>
</div>
    
asked by anonymous 09.06.2014 / 19:26

2 answers

2

I would say if you do not want to close the other sections then you do not need the accordion ...

Instead of an accordion you can do this, and you will save a file of .js

CSS: 

#accordion div {
    display: none;
}

jQuery: 

$(function () {
    $('#accordion h3').on('click', function () {
        $(this).next().slideToggle();
        return false;
    });
});

link

    
09.06.2014 / 19:52
0

I found the solution on stackoverflow in English, here : 

$('#accordion').accordion({
    collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancel the default action
    }
});
    
09.06.2014 / 20:36
php / html Insert multiple data with the same information What is and how to solve net :: ERR_CONNECTION_RESET?