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