Show and Hide

JavaScript
1

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:

$(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/Advice-%26-Support.html

Any idea what’s going on?

2

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:

$('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):

$(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

Assuming that you’ll only have one ‘show-hide’ per page. If not, remove the :first.

$(".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

It was from this page:

5

Ok, so I have this now:

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

$(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

Anyone?

7

Your script is currently doing this:

[list][]slidey slidey
[]set “active” to dt[/list]

Here is what you need to do instead:

[list][]remove “active” from all dt’s
[]slidey slidey
[*]set “active” to dt[/list]

8

Righto, I had tried that approach, will give it another stab.

9

Ok, this is what I have.

$(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

woo hoo,

this however does work.

$(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");
	});
});