Using toggle jquery with list

JavaScript
1

I am trying to make this list of cd’s work. The letters will have the bands listed under them and then when each band will be clicked on a selection of albums by them will appear.

I’ve so far managed to make all of them appear when it is clicked but can’t seem to make only albums for those bands appear they all do.

My Javascript:


$(document).ready(function(){

$(".header3").hide();

  $(".header2").click(function(){
    $this.parent().next(".header3").toggle(slow);
    return false;
  });
});

My CSS:


.header 
{position: absolute;
 top: 24em;
 left: 25%;
 margin: 0;
 padding: 0;
 list-style-type: none;
}

.header li
{ list-style-type: none;
}

.header li a
{color: white;
 font-size: 1.2em;
}

.header .header2 li
{list-style-type: none;
}

.header .header2 a
{color: white;}

.header .header2 .header3 li
{list-style-type: none;
}


.header .header2 .header3 a
{color: blue;}

My HTML (extract of it):


<ul class="header">
<li><a name="a">A</a>
<ul class="header2">
	<li><a href="#">A Perfect Circle</a>
		<ul class="header3">
			<li><a href="http://www.amazon.co.uk/Thirteenth-Step-Perfect-Circle/dp/B0000AZJXQ/ref=sr_1_2?ie=UTF8&qid=1302651762&sr=8-2">13th Step</a></li>
			<li><a href="http://www.amazon.co.uk/Mer-Noms-Perfect-Circle/dp/B00004T99Z/ref=sr_1_1?ie=UTF8&qid=1302651762&sr=8-1">Mer De Noms</a></li>
		</ul>
	</li>
</ul>
<ul class="header2">
	<li><a href="#">AC:DC</a>
	<ul class="header3">
		<li><a href="#">Live</a></li>
	</ul>
	</li>
</ul>
</li>

Thanks in advance

2

Try simply changing

$this.parent().next(".header3").toggle(slow);

to

$(this).parent().next(".header3").toggle("slow");
3

This is the line to focus on.

$this.parent().next(".header3").toggle(slow);

The $this keyword doesn’t exist. I think you might mean $(this) instead

[color="green"]$(this)[/color].parent().next(".header3").toggle(slow);

The slow part has to be a string, not a variable

$(this).parent().next(".header3").toggle([color="green"]'slow'[/color]);

And now you need to traverse the DOM properly.
The parent part takes you from the clicked A element to the LI element. The next part fails, because the LI element has no other siblings.

Instead, what would work is to not use the parent part, but my preferred solution is to use a context selector instead, where you select .header3 from within the context of the clicked link.

[color="green"]$('.header3', this)[/color].toggle('slow');
4

Thank you sooo much! That’s perfect. It’s my first website so got a lot to learn still.

5

If I could just ask something else as only just realized it didn’t work. The part of the lsit that opens has to link to open a new window.

li><a href=“http://www.amazon.co.uk/Thirteenth-Step-Perfect-Circle/dp/B0000AZJXQ/ref=sr_1_2?ie=UTF8&qid=1302651762&sr=8-2” target=“_blank”>13th Step</a></li>

I put that cause target black sohuld open it but all clicking dows is close it up again. I know I can remove return false; from the javascript but this causes the page to jump back up to beginning which I don’t want it to do.

6

One possible solution is add on to the existing click function, so that you check if the target element is an anchor tag, and only if it’s not do you return false.

That complicates the function more than it necessarily should be though, so instead a second preferred solution is to remove the target attribute (it’s invalid anyway when using strict mode) and to instead attach a separate function on to links you want to open in a new window.

Here, we will look for all links in the header section, and those that start with “http://” we’ll attach on to them the a new window function.


$('a[href^="http://"]', '.header').click(newWindow);

That new window function is quite simple, being:


function newWindow() {
    window.open(this.href);
    return false;
}
7

Thank you!