4

I have a question about some functionality I'm trying to add to my jQuery to enable a button or text to expand/contract all the divs on click... and I'd like to figure out how to keep the first div open when the page loads.

Here is the jQuery:

(document).ready(function(){

//Hides containers on load
$(".toggle_container").hide(); 

//Switch "Open" and "Close" state on click
$("h2.trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});

//Slide up and down on click
$("h2.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow");
    });
});

And the css:

// uses a background image with an on (+) and off (-) state stacked on top of each other
h2.trigger { background: url(buttonBG.gif) no-repeat;height: 46px;line-height: 46px;width: 300px;font-size: 2em;font-weight: normal;}
h2.trigger a {color: #fff;text-decoration: none; display: block;}
h2.active {background-position: left bottom;}
.toggle_container { overflow: hidden; }
.toggle_container .block {padding: 20px;}

And the html

<h2 class="trigger"><a href="#">Heading</a></h2> 
<div class="toggle_container"> 
  <div class="block">Stuff goes here</div> 
</div>

<h2 class="trigger"><a href="#">Heading 2</a></h2> 
<div class="toggle_container"> 
  <div class="block">Stuff goes here</div> 
</div>

So it works great and looks great. However, when I try to get it to keep the first instance open, the background image that should adjust show the (-) state doesn't change. The code I used to this was:

$(".toggle_container:first").show();

So, my question is, does anyone know of an easier way to show the first instance of this as open without having to created specials rules/class for the first item? Also, any ideas about how to make an open all/close all link?

Thanks!

4 Answers 4

5

You can change all your jQuery to this:

$(".toggle_container:not(:first)").hide(); 
$("h2.trigger:first").addClass("active");

$("h2.trigger").click(function(){
  $(this).toggleClass("active");
  $(this).next(".toggle_container").slideToggle("slow");
});

This hides all but the first .toggle_container, applies the class="active" to it's matching <h2>, and the toggle() is just simpler, a click now toggles the class...so we can just add active to match it being open on page load and it'll behave correctly.

Also, a open/close all would look like this:

<a href="#" id="openCloseAll">Open All</a>

jQuery like this:

$("#openCloseAll").toggle(function() {
  $(this).text("Close All");
  $(".toggle_container:hidden").prev(".trigger").click();
}, function() {
  $(this).text("Open All");
  $(".toggle_container:visible").prev(".trigger").click();
});

This opens all closed on the first click, changes it's text to accurately describe what the next click will do, and closes all open on the next click, then switches back, rinse, repeat.

8
  • Exactly what I was thinking ( and writing ). Apr 2, 2010 at 21:06
  • Nick, this is very good thank you. Simplified things greatly and works well in everything... but IE (ack!). Not sure why, but in IE 6,7 & 8 that background image of the first item is showing the correct state but the content isn't exposed. It works perfect in other browsers. I'm going to double check my mark-up, but does anything stand out to you that might cause this with this script? Also, is there an easy way to have the default state on the #openCloseAll function be close all, rather than open all? Thanks so much for your help!
    – user279860
    Apr 2, 2010 at 21:38
  • @hollyb - You're on the right track with IE, most likely invalid markup...paste your markup in the validator here and check it out: validator.w3.org For the reversal, easy enough, just swap the toggle function backwards and change the initial text to "Close all" and you're all set. Apr 2, 2010 at 21:45
  • I got the open/close swapped. Thanks for that. I've stripped down css/html to barebones, valid HTML. I still can't get the dang thing to open the first instance in IE. As I mentioned, the background is swapped to the minus state, which is good, but the div isn't expanded. I'm at a loss...? Any other ideas?
    – user279860
    Apr 2, 2010 at 22:35
  • @hollyb - If you comment out the $(".toggle_container:not(:first)").hide(); is it still hidden in IE? Apr 2, 2010 at 22:50
1

Use this instead - It will make it work in IE too :

$(".toggle_container:first").show(); $("h2.trigger:first").addClass("active");
1

@user279860 I really found your code helpful pal. Instead of repeating the HTML for hover effect I used a single image using CSS stripes and the effect seems to work just perfect.

Using Nick's code I restructured the following:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function(){

    $(&quot;.toggle_container&quot;).hide();

    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });

});
</script>

and for CSS I used the following:

h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:arial;
font-size: 1.4em;
font-weight: bold; 
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}

h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

So the final HTML becomes:

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

Div Sections Goes here

</div>
</div>

Hope this helps to summarize all this discussion. Thanks Nick for clearing it further :)

0

Further to what Nick posted you will also need to do the sliding.

$("h2.trigger").click(function(){
    $(this).toggleClass("active");
    $(this).next(".toggle_container").slideToggle("slow"); // added 
});
1
  • I'm not sure what you mean? This seems to be in Nick's code, unless I'm missing something?
    – user279860
    Apr 2, 2010 at 21:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.