Question

I’m struggling with implementing a custom accordion. It really is just a slideToggle show/hide, but I only want ONE toggle open at a time, with jquery adding and removing classes for extra styling.

The below code MOSTLY works… the part throwing me for a loop is adding/removing a class of “active” on my h4 element. When someone clicks the H4, it should receive class “active”, and all other h4 elements in my block will have “active” removed. I’ve tried this a zillion ways and I just can’t QUITE figure it out.

Here’s an example of my HTML…

    <div class="accord-block">
      <h4 class="accordLink"><a href="#">Title of box</a></h4>
      <div class="accord-container">
        <div class="accord-content">
          <p>Lorem ipsum content dolor sit amet desu</p>
        </div>
      </div>
    </div>

    <div class="accord-block">
      <h4 class="accordLink"><a href="#">Another title of another box</a></h4>
      <div class="accord-container">
        <div class="accord-content">
          <p>Lorem ipsum content dolor sit amet desu</p>
        </div>
      </div>
    </div>

Here’s my jquery…

    $(document).ready(function(){
    $(".accord-container").hide(); 
    $("h4.accordLink").click(function(){
        $(".accord-block").find(".active").removeClass("active");
        $(this).toggleClass("active").next().slideToggle("fast");
        $(this).parent().toggleClass("activeToggle").siblings()
.removeClass("activeToggle").children(".accord-container").hide("fast");
        return false;
        });
    });

Any insights would be fantastic. I’m going this route because I need the “accord-block” to receive one set of CSS and IDs, and I don’t want to use the Jquery UI when I feel like this solution is allllmost there.

Thanks!

Edit to add: I forgot to describe the problem I’m having! With the current above code, when you click a single h4.accordLink “open” then “closed”, jquery does not remove the class “active”. It works great when you click between accord-blocks, but not on opening and closing the single block.

Answer 1

Having seen the update, here’s my solution: http://jsfiddle.net/75Et5/3/

I’ve used the index() function to establish which block you’re in, and therefore not remove the active class, so that it toggles properly when you close the H4 tag.

EDIT

And a slightly cleaner way of doing it: http://jsfiddle.net/75Et5/4/

Which uses .not($(this)) instead of the index() function:

$(".accord-block").find(".active").not($(this)).removeClass("active");