jquery toggle accordian without plugin

Question

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 greatly appreciated.

Thanks

paste some relevant markup please. – yoda Mar 10 '11 at 21:33 — yoda, Mar 10 '11 at 21:33
Updated post to be more complete – estern Mar 10 '11 at 21:38 — estern, Mar 10 '11 at 21:38

score 2 · Answer 1 · edited May 23 '17 at 11:55

2

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.

edited May 23 '17 at 11:55

Community

1
1

answered Mar 10 '11 at 21:35

mrtsherman

39,342
23
87
111

What about for my toogleClass part? I need to change background for the a tag too. this is not going to work for what i am looking for anyways. I have a couple more working pieces that i need still visible for clicking – estern Mar 10 '11 at 21:42
@estern: just chain those methods on their respective calls. e.g. `(this).slideDown().toggleClass("openBox")` – yoda Mar 10 '11 at 21:45
Since you already want to be explicit about which one shows/hides, you may want to do the same with the class to reduce the chance that the class will be toggled in a state opposite the show/hide. `(this).slideDown().addClass("openBox");` and `$("yourdivs").slideUp().removeClass("openBox");`. – patridge Mar 10 '11 at 21:54

score 1 · Accepted Answer · answered Mar 10 '11 at 23:00

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.

jquery toggle accordian without plugin

2 Answers2