If I have html such as:
<ul id="tags">
<li>
<a href="#">Toggle</a>
<div>Content1</div>
</li>
<li>
<a href="#">Toggle</a>
<div>Content2</div>
</li>
</ul>
How can I write a JQuery select/click event such that each link toggles the div below it?
$('#tags li a').click(function(){
$('#tags '+this.parent()+' div').slideToggle();
});
Tried something like that but its not giving me the results. Any help?
$('#tags li a').click(function(){
$(this).siblings("div").slideToggle();
});
or
$('#tags li a').click(function(){
$(this).next("div").slideToggle();
});
$('#tags li a').click(function(){
$(this).next('div').slideToggle();
});
[RE-EDIT]:
<script src="jquery.js"></script>
<ul id="tags">
<li style="display: none">
<a href="#">toggle</a>
<div>Content1</div>
</li>
<li>
<a href="#">toggle</a>
<div>Content2</div>
</li>
</ul>
<script>
$('ul li a').click(function(){
$("ul li").slideToggle('slow');
});
</script>
[OLD]:
<ul id="tags">
<li style="display: none">
<div>Content1</div>
</li>
<li>
<div>Content2</div>
</li>
</ul>
<a href="#" class="toggle">Toggle</a>
<script>
$('.toggle').click(function(){
$("ul li").slideToggle('slow');
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.