custom jquery accordion - adding/removing classes on anchors

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-开发者_JAVA百科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.

---

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");

---

There's a hack to allow ui-state-disabled for the accordion containers:

$("#myaccordion").accordion({
autoHeight: false,
navigation: true,
create: function(event,ui){ 
    $( "#container2" ).addClass("ui-state-disabled");
    $( "#container3" ).addClass("ui-state-disabled");
    $( "#container4" ).addClass("ui-state-disabled");
    $( "#container5" ).addClass("ui-state-disabled");
}
});  

    // Hack to implement the disabling functionnality

        var accordion = $( "#myaccordion" ).data("myaccordion");
        accordion._std_clickHandler = accordion._clickHandler;
        accordion._clickHandler = function( event, target ) {
        var clicked = $( event.currentTarget || target );
        if (! clicked.hasClass("ui-state-disabled"))
          this._std_clickHandler(event, target);
        }; 

Then, you add in buttons in the container to direct movement to the next container (and do any necessary validations). For example - here's the js for a next button to do validation and open the next container:

$('#NextLink1').click(function () {
        //verify uniqueness of username before proceeding.
        var regexVal = /^([a-zA-Z0-9]+)$/;
        if ($('#user_username').val() == "") {
            $('#usererrormsg').text("You must provide a user name");
            $('#usererrormsg').show();
        } else if ($('#company_name').val() == "") {
            $('#usererrormsg').text("You must provide a company name");
            $('#usererrormsg').show();
        } else if (regexVal.test($('#user_username').val())==false) {
            $('#usererrormsg').text("User names must be alpha-numeric only. No special characters.");
            $('#usererrormsg').show();
        } else if ($("#user_user_picture").val() && $("#user_user_picture").val().match(/(.png$)|(.jpg$)|(.jpeg$)|(.gif$)/i) == null )  {
            $('#usererrormsg').text("Pictures must be png, jpg, jpeg, or gif format.");
            $('#usererrormsg').show();      
        } else {
        //$.get('/users/isusernameunique?un='+$('#user_username').val(),function(data) {
            $.post('/users/isusernameunique', {
                'un': $('#user_username').val()
            },function(data) {
                //$('#uniqueuserresult').html(data);
                if(data.msg == "dupe") {
                    $('#usererrormsg').text("Someone stole your username! They must be unique. Please try again.");
                    $('#usererrormsg').show();
                    $('#user_username').focus();
                } else {
                    $('#usererrormsg').hide();
                    $( "#container2" ).removeClass("ui-state-disabled");                    
                    $('#container2h3').click();
                    $( "#container1" ).addClass("ui-state-disabled");
                }
            }, "json");         
        }

        //$('#companydetailsh3').click();
        return false;
    });