finding a <p> in a <div> using jQuery

[reececropley]

Title doesn't really give this thread justice ... I have a content div with an image and text included into it. This same div class is being used multiple times. What I want is to be able to click the image, and have the <p> in that div toggle to show or hide.

Here is the XHTML code for the front-end:

<div class="content">
	<img src="image_big.gif" alt="image" class="toggle_font" />
    <p> Caption for the next image. </p>    
</div>

Here is the jQuery code that I am using:

$('.toggle_font', this).click(function(){
	$("div.content").find("p").toggle(2000);
	});

When I click on the image all of the <p> throughout the page toggles. I want only that div to toggle.

I hope that people understand what I am trying to say ... thankyou in advance.

[scrappedcola]

You could use a combination of javascript and css. You don't necessarily need to target the <p> with javascript just css. Set up your css like this

div.content.hide p
{
  display:none;
}
div.content.show p
{
   display:block;
}

And then in your click event just remove the hide/show class based upon the current class.

$('.toggle_font').click(function(){
   if($("div.content").hasClass("hide"))
   {
      $("div.content").removeClass("hide").addClass("show");
    }else{
      $("div.content").removeClass("show").addClass("hide");
    }
});

[reececropley]

Thanks for your response scrappedcola, but unfortunately it hasnt solved my problem. I have used the <div class="content"> twice, like so:

<div class="content">
	<img src="image_big.gif" alt="image" class="toggle_font" />
    <p> Caption for the image. </p>    
</div>
<div class="content">
	<img src="image_big.gif" alt="image" class="toggle_font" />
    <p> Caption for the next image. </p>    
</div>

and what I want is that only the text under the image I have clicked will appear. Whereas at the moment both of the text's appear.

Thanks again though for your help.

[scrappedcola]

You can change it do target the selected Images Div by changing the code to

$('.toggle_font').click(function(){
		
	$("div.content").removeClass("show").addClass("hide"); /* set all to hide */
	if($(this.parentNode).hasClass("hide")) /* show the clicked images div*/
	{	
        	$(this.parentNode).removeClass("hide").addClass("show");
	}else{
		$(this.parentNode).removeClass("show").addClass("hide");
	}
});

[reececropley]

Again that is another way that the code will hide/show the text, but unfortunately it will hide/show the text for each of the images. I want it to be unique to the image clicked.

If there are two images .... both with text underneath .... I click one of the images and the text below becomes hidden .... but the other image's text remains shown.

Im reasonably new to the Javascript/jQuery language, so I may be missing something reasonably obviuos.

[scrappedcola]

First you said:

what I want is that only the text under the image I have clicked will appear

and now you are stating :

If there are two images .... both with text underneath .... I click one of the images and the text below becomes hidden .... but the other image's text remains shown.

Are you now stating the opposite of what you initially requested?

either way you can use

$("div.content").removeClass("show").addClass("hide"); /* set all to hide */

to either hide or show all elements on the page. If you want the opposite text from what you clicked to show switch the names in the removeClass and addClass so that all elements are initially shown. Then you need to grab the parent node of the link that was clicked which is done by $(this.parentNode). You will then either apply the class "hide" or "show" to it to get it to do what you want. If you want it to appear you will do :

$(this.parentNode).addClass("show")

If you want it to hide you will do

$(this.parentNode).addClass("hide")

. Also in your html if you want one to show/hide initially you will need to give it the additional class of either "hide" or "show".For example if you want the second image text to be hidden initially you would do

<div class="content">
	<img src="image_big.gif" alt="image" class="toggle_font" />
    <p> Caption for the image. </p>    
</div>
<div class="content hide">
	<img src="image_big.gif" alt="image" class="toggle_font" />
    <p> Caption for the next image. </p>    
</div>

Please note you will need to have the css defined for "hide" and "show" or none of this will appear to work.

[JJenZz]

Sounds like they just want to remove the line that hides all displayed content when a toggle is clicked. So something like this is all you need:

HTML:

<div class="content hide-content">
    <img src="image_big.gif" alt="image" class="toggle_font" />
    <p>Caption for the image.</p>    
</div>
<div class="content hide-content">
    <img src="image_big.gif" alt="image" class="toggle_font" />
    <p>Caption for the next image.</p>   
</div>

CSS:

.hide-content p {
    display: none;
}

jQuery:

$('.toggle_font').click(function(){
    $(this.parentNode).toggleClass('hide-content');
});

I suggest using JavaScript to add a .js class to your <html> tag and then changing the .hide-content CSS like this: '.js .hide-content p {' that way when people have JS disabled, they will see your hidden content.

[reececropley]

Cheers guys. Turns out I had an earlier function in the same file conflicting with the code and although all of your suggestions were correct, they didnt show up because of the conflict.

Thanks for your help!