SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Show and Hide

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show and Hide

    I was trying to follow a tutorial and understand why it does what it does, but it's not working and I don't know why.

    This is my jQuery:
    Code JavaScript:
    $(document).ready(function() {
      $('div.show-hide:eq(1)> p:gt(0)').hide();  
      $('div.show-hide:eq(1)> h3').click(function() {
        $(this).next('p:hidden').slideDown('fast')
        .siblings('p:visible').slideUp('fast');
      });
    });

    Its from this page:

    http://softbrick.webtise.net/pages/A...6-Support.html

    Any idea what's going on?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It probably won't work because there is only one element with the class "show-hide" and in this expression, you're matching the second one:

    Code:
    $('div.show-hide:eq(1)> p:gt(0)')
    Read the documentation about :eq.

    This seems like an overly complex way to do it. Surely this will do (not tested):

    Code javascript:
    $(document).ready(function() {
      $('div.show-hide > p').hide(); 
      $('div.show-hide > h3').click(function() {
        $(this).next('p:hidden').slideDown('fast')
        .siblings('p:visible').slideUp('fast');
      });
    });

    I like the siblings() selector, it's neat. I hadn't seen it before.

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assuming that you'll only have one 'show-hide' per page. If not, remove the :first.

    Code JavaScript:
    $(".show-hide:first").each(function(i) {
    	var $init = $(this);
     
    	var $heading = $init.children().filter("h3");
    	var $para = $init.children().filter("p");
     
    	$heading.click(function() {
    		var $this = $(this);
     
    		$para.slideUp(500);
     
    		if ($para.is(":hidden")) {
    			$this.next("p:hidden").slideDown(500);
    		}
    	});
    });

  4. #4
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    It probably won't work because there is only one element with the class "show-hide" and in this expression, you're matching the second one:

    Code:
    $('div.show-hide:eq(1)> p:gt(0)')
    Read the documentation about :eq.

    This seems like an overly complex way to do it. Surely this will do (not tested):

    Code javascript:
    $(document).ready(function() {
      $('div.show-hide > p').hide(); 
      $('div.show-hide > h3').click(function() {
        $(this).next('p:hidden').slideDown('fast')
        .siblings('p:visible').slideUp('fast');
      });
    });

    I like the siblings() selector, it's neat. I hadn't seen it before.
    It was from this page:

    http://www.learningjquery.com/2007/0...ng-more-hiding

  5. #5
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so I have this now:

    Code JavaScript:
    $(document).ready(function() {
      $('dl.show-hide > dd').hide();
      $('dl.show-hide > dt').click(function() {
        $(this).next('dd:hidden').slideDown(200)
        .siblings('dd:visible').slideUp(200)
        $(this).addClass("active");
      });
    });

    I have added this to give a class to the active DT:

    Code JavaScript:
    $(this).addClass("active");

    Problem is it stays highlighted when I click on something else. Is there anyway I can remove the class if the dt has not been clicked?

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by NickToye View Post
    I have added this to give a class to the active DT:

    Code JavaScript:
    $(this).addClass("active");

    Problem is it stays highlighted when I click on something else. Is there anyway I can remove the class if the dt has not been clicked?
    Your script is currently doing this:

    • slidey slidey
    • set "active" to dt


    Here is what you need to do instead:

    • remove "active" from all dt's
    • slidey slidey
    • set "active" to dt
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Your script is currently doing this:

    • slidey slidey
    • set "active" to dt


    Here is what you need to do instead:

    • remove "active" from all dt's
    • slidey slidey
    • set "active" to dt
    Righto, I had tried that approach, will give it another stab.

  9. #9
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, this is what I have.

    Code JavaScript:
    $(document).ready(function() {
    	$('dl.links > dt').removeClass("active");
    	$('dl.links > dd').hide();
    	$('dl.links > dt').click(function() {
    		$(this).next('dd:hidden').slideDown(200)
    		.siblings('dd:visible').slideUp(200)
    		$(this).addClass("active");
    	});
    });

    This doesn't work.

  10. #10
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Port Sunlight
    Posts
    815
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    woo hoo,

    this however does work.

    Code JavaScript:
    $(document).ready(function() {
    	$('dl.links > dd').hide();
    	$('dl.links > dt').click(function() {
    	$(this).next('dd:hidden').slideDown(200)
    	.siblings('dd:visible').slideUp(200).siblings('dt').removeClass("active")
    	$(this).addClass("active");
    	});
    });


Bookmarks

Posting Permissions

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