jquery ui accordion avoid closing item wnen clicking on another one

Question

starting from existing fiddle, I've created this sample: http://jsfiddle.net/2DaR6/90/

Here's the html code:

<div id="accordion">
  <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3>
    <div> Good Morning Stackoverflow</div>
  <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3>
    <div>Buongiorno Stackoverflow</div>
  <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3>
    <div>Bonjour Stackoverflow</div>
</div>

and here's the js code:

$(function() {
    var icons = {
        header: "ui-icon-circle-arrow-e",
        headerSelected: "ui-icon-circle-arrow-s"
    };
    $( "#accordion" ).accordion({
        icons: icons,
        collapsible: true
    });
    $( "#header1" ).click(function() {
        $( "#accordion" ).accordion( "option", "icons", false );
    }, function() {
        $( "#accordion" ).accordion( "option", "icons", icons );
    });
});​

If I click on Section 1, accordion correctly opens, but I want that clicking on other items, previously opened items won't close. How can I obtain this behaviour? Thanks

Answer 1

You should not use jquery accordion for this kind of purpose. However, its relatively easy to override any element events behaviour. When accordion is initialized, you just have to override click handler to corresponding elements.

In your case, this giving something like this:

$('#accordion .accClicked')
        .off('click')
    .click(function(){
        $(this).next().toggle('fast');
    });​

See working jsFiddle

Answer 2

I agree that accordion probably isn't the best plugin to use, BUT you could do the following:

You could change from using an id and use accordion as a class, and then have multiple div to break your sections up.

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(function() { $( ".accordion" ).accordion({collapsible: true, active: false}); }); </script> <div class="accordion"> <h3>header 1</h3> <p>this is my content 1</p> </div> <div class="accordion"> <h3>header 2</h3> <p>this is my content 2</p> </div> 

Answer 3

May be do you need another plugin collapse/expand? For example this (see the example of the bottom of page)

Answer 4

$(".xyz").accordion({ collapsible: true,
active: false, heightStyle: "content", icons:"", });