You don't need .each(), and if you want reduce your code you can, with
chaining, do it all in a one line of jQuery:
CSS (to initially hide all the contents):
p.contents{
display:none;
}
HTML ('contents' class added for easier selecting):
<ul>
<li>
<p>Item 1</p>
<p class="contents">Hidden contents 1</p>
<p><a href="up" class="change">Click to show</a></p>
</li>
<li>
<p>Item 2</p>
<p class="contents">Hidden contents 2</p>
<p><a href="up" class="change">Click to show</a></p>
</li>
<li>
<p>Item 3</p>
<p class="contents">Hidden contents 3</p>
<p><a href="up" class="change">Click to show</a></p>
</li>
</ul>
JS:
$('a.change').click(function(){
$(this).text('Click to '+($(this).hasClass
('open')?'show':'hide')).toggleClass('open').closest('li').children
('p.contents').slideToggle().end().siblings().children
('p.contents').slideUp().next('p').children('a.change').text('Click to
show').removeClass('open');
return false;
});
On Mar 14, 12:34 pm, Jsbeginner <jsbegin...@monarobase.net> wrote:
> 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.
