jquery help
- Started
- Last post
- 6 Responses
- Stugoo
I have a set of ordered lists as such :
<ul class="related_js">
<li><h3>header 01</h3> <!--toggle insert--></li>
<li> item 01 </li>
<li> item 02 </li>
<li> item 03 </li>
<li> item 04 </li>
<li> ... </li>
<li> item 10 </li>
</ul><ul class="related_js">
<li><h3>header 02</h3> <!--toggle insert--></li>
<li> item 01 </li>
<li> item 02 </li>
<li> item 03 </li>
<li> item 04 </li>
<li> ... </li>
<li> item 10 </li>
</ul>
<ul class="related_js">
<li><h3>header 03</h3> <!--toggle insert--></li>
<li> item 01 </li>
<li> item 02 </li>
<li> item 03 </li>
<li> item 04 </li>
<li> ... </li>
<li> item 10 </li>
</ul>and what I am trying to do is for each <ul> show only the 1st 3 entries and when you click the toggle button (inserted using jquery) it slides in the rest of the articles but for each list independantly...
here is what i have so far :-
//great toggle function to show them
$('.related_js li h3').parent().append('<span class="toggle right">toggle</span>'); //draw toggle button//this is the bit I cant get working
var related_list = $('.related_js').children('li:gt...//function to show/hide items
related_list.hide();
$('.toggle').click(function() {
list.slideToggle(400);
return false;
});im looking for something that does:
"for each ul with a class related_js, show the first 3 items, then when the toggle button is clicked show the rest of the list"
- Stugoo0
sorrry cut off :
var related_list = $('.related_js')
.children('li:gt(4)')
- NotByHand0
Flexible rates:
http://www.vormburo.nl/2009
- rounce0
Make another list containing the stuff to be toggled and then toggle that. Use CSS to remove the indentation and you're set!
- Stugoo0
i can get the first 3 items of the list. but i need a way of finding out how to select the first 3 for each list, as the list appears multiple times on the page.