[jQuery] Simple toggle between slide up slide down and changing paragraph html contents not working...
Hello,
I've been struggling with a very simple code that I can't get to work ...
Simplified html :
<ul>
<li>
Item 1
<p class="toggle">Hidden contents 1
<a href="#" class="down">Click to show</a>
</li>
<li>
Item 2
<p class="toggle">Hidden contents 2
<a href="#" class="down">Click to show</a>
</li>
<li>
Item 3
<p class="toggle">Hidden contents 3
<a href="#" class="down">Click to show</a>
</li>
</ul>
This is what I want to do :
When you click on a Click to show link it shows the hidden contents
contained in the item's "toggle" paragraphe and changes the link text to
"Click to hide".
I also want to only be able to have one hidden contents showing at a
time, so I would like to be able to hide any other visible hidden
contents before showing the hidden contents asked for.
I know my code isn't perfect but the following code works to some extent
: I can show or hide the contents but not hide all other contents before
showing new contents.
--------------------------
function down() {
$("a.down").each(function(){
$(this).click(function(){
reinit();
$(this).parent("p").prev("p").slideDown(300);
$(this).parent("p").html("<a href=\"#\" class=\"up\">Click
to hide</a>");
up();
return false;
});
});
}
function up() {
$("a.up").each(function(){
$(this).click(function(){
$(this).parent("p").prev("p").slideUp(300);
$(this).parent("p").html("<a href=\"#\" class=\"down\">Click
to show</a>");
down();
return false;
});
});
}
function reinit(){
$(".toggle").each(function(){
$(this).slideUp(300);
$(this).next("p").html("<a href=\"#\" class=\"down\">Click to
show</a>");
});
}
$(document).ready(function(){
down();
});
--------------------------
There is just one line that doesn't work it's in the reinit function :
$(this).next("p").html("<a href=\"#\" class=\"down\">Click to show</a>");
I've been trying lots of ways to get this working without success... I
thought it would work with the next function but no luck.
If it will help you to find what I've done wrong I've put all the
necessary code (except the jquery library) in one html file, I've not
added it to this help request to not make it too long, but if you find
it difficult to follow me I can post it's contents so you can test it.
Thankyou.