Jquery Ui Accordion Avoid Closing Item Wnen Clicking On Another One

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

Solution 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

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

Solution 3:

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

Solution 4:

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

Share