Thankyou, I've at last got it working, I used the href attribute to
specify if the text is hidden or not (I will add the html code with
javascript and will supply a PHP version for navigators that are not
compatible with javascript), to begin with I wanted to use the toggle
function but I needed to be able to skip a status and didn't know if
this was even possible. I don't know if there is a better way but here
is how I ended up doing it (any advice to make my code better would be
great :)) :
Here is my code :
JS :
-----
$("a.change").each(function(){
$(this).click(function(){
if($(this).attr("href") == "up"){
$("a.change").each(function(){
if($(this).attr("href") == "down"){
$(this).parent("p").prev("p").slideUp(300);
$(this).attr("href","up");
$(this).text("Click to show");
}
});
$(this).parent("p").prev("p").slideDown(300);
$(this).attr("href","down");
$(this).text("Click to hide");
} else {
$(this).parent("p").prev("p").slideUp(300);
$(this).attr("href","up");
$(this).text("Click to show");
}
return false;
});
});
-----
HTML :
-----
<ul>
<li>
<p>Item 1<p>
<p>Hidden contents 1</p>
<p><a href="up" class="change">Click to show</a></p>
</li>
<li>
<p>Item 2<p>
<p>Hidden contents 2</p>
<p><a href="up" class="change">Click to show</a></p>
</li>
<li>
<p>Item 3<p>
<p>Hidden contents 3</p>
<p><a href="up" class="change">Click to show</a></p>
</li>
</ul>
-----
Jonathan wrote:
.each() should do what you want.
It will iterate through each element that has the class "Item" and
will set "this" to that individual element. So no $(this) will not be
the same as $(.item) e.g with this markup
<div class="item"/>
<span class="item"/>
$(".item").each() will execute twice with "this" being the DIV then
the SPAN.
Jsbeginner wrote:
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.
