jquery toggle accordian without plugin

Hi have two content sections and i only want 1 open at a time. They both collapse and open based on clicking the headings. I have it currently working where they are independent of each other but i am looking to have them hide the other when it is shown. I dont want to have to use the plugin for jquery accordion.

here is the code i have now:

HTML:

<div class="topCats">
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4>
</div>
<div id="topCatsContainer">
   content 1
</div>
<div class="allCats">
    <h4><a href="#" class="closed">All Categories</a></h4>
</div>
<div id="allCatsContainer">
   content 2
</div>

JS:

$('#allCatsContainer').css("display", "none");
$('.topCats h4 a').click( function() {
    $('#topCatsContainer').slideToggle(500);
        $(this).toggleClass("openBox");
});

$('.allCats h4 a').click( function() {
    $('#allCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");                                                                     
});

Any help would be开发者_Go百科 greatly appreciated.

Thanks

This was answered recently here: What code do i need to collapse a div when another is open?

The easy way is to collapse both, then expand the one you want. The one that is already collapsed will be ignored.

$('yourdivs').click( function() {
    $("yourdivs").slideUp();
    $(this).slideDown();
});

Update: Above won't work for him because there is no direct link between <a> and <div>. This is really ugly, but the following works http://jsfiddle.net/mrtsherman/MPwQ8/3/

$('#allCatsContainer').css("display", "none");

$('.topCats h4 a').click( function() {
    $('#topCatsContainer').slideToggle(500);    
    $('#allCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");
});

$('.allCats h4 a').click( function() {
    $('#allCatsContainer').slideToggle(500);
    $('#topCatsContainer').slideToggle(500);
    $(this).toggleClass("openBox");  
});

There are lots better ways to do this. The initial link I provided you has an example. If you want something more robust then you need to create some means to logically tie your links to your divs.

I tried to not alter your HTML if possible, so that you wouldn't have to deal with styling headaches. Unfortunately this means the JS is a bit more hard coded than I would like.

HTML:

<div class="topCats">
    <h4><a href="#" class="openBox">Most Searched Categories</a></h4>
</div>
<div id="topCatsContainer" class="accordianContent">
   content 1
</div>
<div class="allCats">
    <h4><a href="#" class="closed">All Categories</a></h4>
</div>
<div id="allCatsContainer" class="accordianContent">
   content 2
</div>

The HTML is the same except I added a class to each of your content div.

JS:

$('#allCatsContainer').css("display", "none");

$('.topCats h4 a, .allCats h4 a').click(function() {
    var content = $(this).parent().parent().next();

    if(content.is(':visible')) {
        content
            .slideUp(500)
            .addClass('closed')
            .removeClass('openBox');
    } else  {
        content
            .parent()
            .find('.accordianContent:visible')
            .slideUp(500)
            .addClass('closed')
            .removeClass('openBox');

        content.slideDown(500).removeClass('closed').addClass('openBox');
    }
});

Basically the JS finds the content that matches the link that was clicked. If the content was visible then it just closes itself. If it wasn't visible then we close whichever was visible and open the clicked content.

If you notice I am toggling both the openBox and closed class, which can be redundant but I wasn't sure if your styling relied on it or not.

In general this functionality can be accomplished many ways and if you are willing to change your HTML a bit we could have the JS side look a bit more presentable :) Otherwise you can just use this implementation and avoid any styling headaches.