problem in toggle function of jquery

Question

i have a section in my website that needs to be toggled by clicking on the title .

now i wrote this code to toggle when clicking on title

$(document).ready(function(){
$(".toggle_container").hide();
$("h4.trigger").click(function(){
  $(this).toggleClass("active").next().slideToggle("slow");
});
});

html part :

<h4 class="trigger"><a href="javascript:void(0)">'.$row[title].'</a></h4>
<div class="toggle_container">
 <div class="block">
  '.$row[text].'
 </div>
</div>

now with these codes everything goes fine , untill it just opens every title clicked and not closes opened ones ;

1st

now i have to change this script in a way that when i click on a title to toggle first check opened ones and close those first

2nd

and the other thing im wondering is how to make the first title to be opened already , when the page loaded the first title to be opened

thanks in advance

just an FYI $("h4.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); }); is better written as $("h4.trigger").click().toggleClass("active").next().slideToggle("slow"); — Mark Schultheiss
– Mark Schultheiss, Commented Jul 2, 2010 at 13:07
@Mark - That code has a completely different meaning. His code is an event handler for the click event, yours triggers the click event and performs actions on each h4.trigger, not at all what he's after. — Nick Craver
– Nick Craver, Commented Jul 2, 2010 at 13:09

Nick Craver · Accepted Answer · 2010-07-02 13:29:02Z

2

I was hoping one of the other answers would update and fix this, but both of them never toggle, they always show, here's how to toggle and hide the others like you want:

$(function(){
  $(".toggle_container:gt(0)").hide();
  $("h4.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow")
           .siblings(".toggle_container").slideUp();
  });
});

You can try out a demo here, it shows the first on load, and correctly toggles the rest.

answered Jul 2, 2010 at 13:29

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ergec · Accepted Answer · 2010-07-02 12:49:28Z

1

This should do it I guess

$(document).ready(function(){
  $(".toggle_container").hide();
 $(".toggle_container:first").show();
  $("h4.trigger").click(function(){
    $(".toggle_container").hide();
    $(this).toggleClass("active").next().slideToggle("slow");
  });
});

answered Jul 2, 2010 at 12:49

Ergec

11.9k7 gold badges54 silver badges68 bronze badges

1 Comment

Nick Craver Over a year ago

This would always show the next .toggle_container on click, since you're hiding all of them on each click, making the toggle state/.active class an invalid representation of what's going on.

Kai · Accepted Answer · 2010-07-02 12:59:01Z

1

Html

<h4 class="trigger"><a href="javascript:void(0)">Title1</a></h4>
<div class="toggle_container">
 <div class="block">
  Test
 </div>
</div>
<h4 class="trigger"><a href="javascript:void(0)">Title2</a></h4>
<div class="toggle_container">
 <div class="block">
  Test
 </div>
</div>
<h4 class="trigger"><a href="javascript:void(0)">Title2</a></h4>
<div class="toggle_container">
 <div class="block">
  Test
 </div>
</div>

Javascript

$(document).ready(function(){
    $(".toggle_container:gt(0)").hide();
    $("h4.trigger").click(function(){
    $(".toggle_container:visible").slideUp('slow');
  $(this).toggleClass("active").next().slideToggle("slow");
});
});

You can check working demo at http://www.jsfiddle.net/XnV69/3/

answered Jul 2, 2010 at 12:59

Kai

3,0171 gold badge24 silver badges30 bronze badges

1 Comment

Nick Craver Over a year ago

This suffers from the same problem as the other answer...it'll always show, never toggle :) Should be something like this: jsfiddle.net/XnV69/4

Collectives™ on Stack Overflow

problem in toggle function of jquery

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related