...

View Full Version : jQuery Problem with Show/Hide divs with Jquery



Mechaworx
10-21-2010, 03:18 AM
Hi All,

I'm new to this forum and also new to Jquery and am hoping for some help with this small problem.

I am trying to show and hide a div with the class "comments" in video postings. Only thing is there are multiple divs with the "comments" class assigned to them on a single html page. The user clicks on an href link that says "Show comments" and has a class assigned of "show".

After the user clicks this link, it (the link) disappears and the comments div appears. Also a new "Hide Comments" link with a class of "hide" appears.

Of course since I have several divs with a comments class and several show/hide href links with the same class on the same page, they all show and hide at the same time. I'm trying to target only one. (Hope that makes sense)


Below is an example of the relevant html code (didn't post the entire page code)



<div class ="blogContent">
<h3>Brood XIII Slideshow</h3>
<p><a href="Brood_XIII_Slide_Show.flv" title="Brood XIII Slide Show" onclick="return playMovie(this);"><img src="miscellaneous/thumbs/slide_show.jpg" alt="Watch Brood XIII Slideshow" title="Watch Brood XIII Slide Show" class="left" /></a>
<b>Author: </b>Massachusetts Cicadas<br />
<b>Published On: </b>2007-06-11<br />
<b>Description: </b>A photo slide show compilation of Massachusetts Cicadas' trip to the mid-west to study and map the distribution ofBrood XIII Periodical Cicada Emergence. Brood XIII appeared in 2007 in Indiana, Illinois, Wisconsin and Iowa.<br />
<b>Referring Article: </b><a href="../missions/mission_details.php?aid=20" title="Brood XIII Wrap-Up" target="_blank">Brood XIII Wrap-Up</a></p>
<div class="stats">
<p><b>Date Posted</b>: 2010-06-20 <b>Comments</b>: (1) <b>Category</b>: <a href="../general/index.php"title="Cicada General Info">Miscellaneous</a> <a href="javascript:;" class="show">Show Comments</a> <a href="javascript:;" class="hide">Hide Comments</a></p>
</div>
<!--/status class div-->
</div>
<!--/blogContent class div-->
<div class="comments">
<h3>Comments</h3>
<!--Insert php comment code below this line -->
<ul><li><b>Posted By</b>: <span>Gerry Bunker</span></li><li><b>On</b>: 2010-10-18</li><li><b>Website</b>: http://www.mechaworx.com</li></ul><p>Testing the clear forms array.</p><!--/ end php comment code-->

</div><!--//comments div-->
<div class="cform">
<h3>Add Comment</h3>
<!--displays error messages-->
<form action="" method="post" enctype="multipart/form-data">
<div class="row">
<label><span class="label">Your Name:</span>
<input name="name" type="text" value=""/>
</label>
<label><span style="margin-left:.5em; width:75px;">Email:</span>
<input name="email" type="text" value="" />
</label>
</div>
<div class="row">
<label><span class="label">Comments:</span>
<textarea name="comments_body" rows="2" class="formw" /></textarea>
</textarea>
</label>
</div>
<div class="row">
<input type="hidden" name="aid" value="<?php echo $id; ?>" />
</div>
<p style="margin-top:2em;">
<input type="reset" name="reset" id="reset" value="Reset" />
<input name="submit" type="submit" value="submit" />
</p>
</form>
</div>
<!--/ cform div-->
<div class ="blogContent">
<h3>Brood XIV Mashpee Slide Show</h3>
<p><a href="BroodXIV_Mashpee.flv" title="Brood XIV Mashpee Slide Show" onclick="return playMovie(this);"><img src="miscellaneous/thumbs/broodxiva.jpg" alt="Watch Brood XIV Slideshow" title="Watch Brood XIV Slide Show" class="left" /></a>
<b>Author: </b>Massachusetts Cicadas<br />
<b>Published On: </b>2008-05-31<br />
<b>Description: </b>A photo slide show compilation of Massachusetts Cicadas' trip to Cape Cod to study and map the distribution of Brood XIV Periodical Cicada Emergence on Cape Cod.<br />
<b>Referring Article: </b><a href="../missions/mission_details.php?aid=99" title="Brood XIV Survey Continues on Cape Cod" target="_blank">Brood XIV Survey Continues on Cape Cod</a></p>
<div class="stats">
<p><b>Date Posted</b>: 2010-06-19 <b>Comments</b>: (0) <b>Category</b>: <a href="../missions/index.php"title="Cicada Missions">Miscellaneous</a> <a href="javascript:;" class="show">Show Comments</a> <a href="javascript:;" class="hide">Hide Comments</a></p>
</div>
<!--/status class div-->
</div>
<!--/blogContent class div-->
<div class="comments">
<h3>Comments</h3>
<!--Insert php comment code below this line -->
<ul><li><b>Posted By</b>: <span>Gerry Bunker</span></li><li><b>On</b>: 2010-10-18</li><li><b>Website</b>: http://www.mechaworx.com</li></ul><p>Testing the clear forms array.</p><!--/ end php comment code-->

</div><!--//comments div-->
<div class="cform">
<h3>Add Comment</h3>
<!--displays error messages-->
<form action="" method="post" enctype="multipart/form-data">
<div class="row">
<label><span class="label">Your Name:</span>
<input name="name" type="text" value=""/>
</label>
<label><span style="margin-left:.5em; width:75px;">Email:</span>
<input name="email" type="text" value="" />
</label>
</div>
<div class="row">
<label><span class="label">Comments:</span>
<textarea name="comments_body" rows="2" class="formw" /></textarea>
</textarea>
</label>
</div>
<div class="row">
<input type="hidden" name="aid" value="<?php echo $id; ?>" />
</div>
<p style="margin-top:2em;">
<input type="reset" name="reset" id="reset" value="Reset" />
<input name="submit" type="submit" value="submit" />
</p>
</form>
</div>
<!--/ cform div-->




The reason for divs with the same classes is because this page is a php page with dynamically generated code that is pulled from a Mysql database. Anyway, below is my Jquery code:



$('a.show').click(function () {

if ($('.comments').is(":hidden")) {
$('.comments').slideDown("normal");
$('a.show').css('display','none');
$('a.hide').show();

}
});

$('a.hide').click (function () {

if ($('.comments').is(":visible")) {
$('.comments').slideUp("normal");
$('a.show').show();
$('a.hide').hide();

} else {
$('.comments').hide("normal");
}
});



I think I can target a single link by using ($this) but I'm not quite sure how to implement this. It took me a week to figure out this much :) Anyway, hope someone can help.

Sorry this is so long and thanks for reading :)

Gerry

SB65
10-21-2010, 08:39 AM
Yes, $(this) is the way to approach it. There's a couple of options to simplify things as well. You could use the slideToggle() function, and also, instead of having a show link and a hide link, have one link and change the text on it. If you replace:


<a href="javascript:;" class="show">Show Comments</a> <a href="javascript:;" class="hide">Hide Comments</a>

with


<a href="javascript:;" class="togglecomments">Show Comments</a>

then the following jQuery will work:


$(document).ready(function(){
$('.togglecomments').click(function(event) {
$(this).text($(this).text() == 'Show Comments' ? 'Hide Comments' : 'Show Comments');//change the text appropriately
$(this).parents('.blogContent').next().slideToggle();//toggle the div
return false;
});


});

On the last line we're using parents() to traverse up the DOM to find the parent element of the clicked element with class blogContent, and then looking for the next item in the DOM - which in your html is the associated comments div - and toggling it.

Mechaworx
10-21-2010, 04:03 PM
SB65

This worked perfectly. Thanks a lot. Its very difficult to find Jquery help. I'm glad I stumbled upon this forum.

Gerry

VIPStephan
10-22-2010, 12:23 AM
Just two more cents from me on a kind of related note:
If you have something only perform an action with JavaScript then also write it with JS only. There’s no use in hard coding an element into the HTML if it doesn’t do anything without JS.

I’m specifically talking about this kind of anchor: <a href="javascript:;" class="togglecomments">Show Comments</a>
The href attribute has no use since it’s not referring to any source/location (such as another file or page). The first step would therefore be to remove that attribute entirely (since jQuery is already addressing exactly that element by its class and the click function).

The next step would be to remove the element entirely from the HTML and write/append it with JS, too, since its only purpose is to invoke a JS function:


$('.stats').append('<a class="togglecomments">Show Comments</a>');


In fact, it doesn’t even have to be an anchor element, it could as well be a span or a div or whatever (but an anchor does have its justification in this case). You can style the element and its behavior on mouseover with CSS.

Just keep in mind: If some element does nothing but invoke a JS function don’t write it into the HTML, create this element itself with JS.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum