Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with Show/Hide divs with Jquery

    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)

    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:

    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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

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

    Code:
    <a href="javascript:;" class="togglecomments">Show Comments</a>
    then the following jQuery will work:

    Code:
    $(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.

  • Users who have thanked SB65 for this post:

    Mechaworx (10-21-2010)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    SB65

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

    Gerry

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    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:
    Code:
    $('.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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •