jQuery: Problem with Toggle.

[nimaOL]

Lately I’ve started to learn jQuery and trying to use it in my first project.

I made a new page and needed Toggle on it to show/hide only the paragraphs after clicking on H2.
I made a DIV tag and included H2 and P inside of it.
It’s working fine until I click or select the P, it will toggle it too, I need to neutralize P on Toggle. I tried a few ways I knew to get around it but couldn’t solve it completely because of my current understanding of jQuery.

This is an example I just made on JSBin
http://jsbin.com/ezeto4/2

My jQuery code

  $(function(){

$('.wrap').click(function(){

$(this).children('.front').stop().toggle();

});

});

And HTML:

Click Here...!


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Any help will be greatly appreciated,
Nima

[ChrisBull]

It’s doing that because the function gets called whenever the ‘wrap’ div is clicked, as the ‘p’ is inside the ‘wrap’. Just give the h2 tag a class and use that for the function.

[nimaOL]

I know but I will have other posts alike too so I can’t just do this code only for one particular DIV:
$(function(){
$('h2').click(function(){ $('p').toggle(); });
});
Because I need to use $(this) to target only the DIV the user clicks on otherwise all the ‘p’s will be Toggle on the page.

[nimaOL]

OK, I’ve been working on it all day and finally have it solved with this short tut, titled “Enhancing FAQs with jQuery” …
Here’s the link for those who are interested: http://coderseye.com/2007/enhancing-faqs-with-jquery.html

[Author]

Posts