Hello again, I've been continuing my search and it seems that the .each
function is not working the way I wanted it to...
From what I've understood $(".item").each(function(){}) just counts how
many elements have the 'item' class, and then executes the code that
number of times with $(this) being the same as $(".item").
How would I go about running a function on each element ? would I have
to do something with a counter an the next function to achieve this ? or
is there an easier way ?
Thankyou.
Jsbeginner wrote :
Hello,
I've been struggling with a very simple code that I can't get to work ...
Simplified html :
<ul>
<li>
<p>Item 1<p>
<p class="toggle">Hidden contents 1</p>
<p><a href="#" class="down">Click to show</a></p>
</li>
<li>
<p>Item 2<p>
<p class="toggle">Hidden contents 2</p>
<p><a href="#" class="down">Click to show</a></p>
</li>
<li>
<p>Item 3<p>
<p class="toggle">Hidden contents 3</p>
<p><a href="#" class="down">Click to show</a></p>
</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.
