[jQuery] Re: How to select an element based on visibility

[Karl Swedberg]

You're very close. The .slideToggle() method will slide down if hidden  
and up if visible:

$(document).ready(function(){
        $(".firstLine").click(function(){
                $(this).next().slideToggle('slow');
        });
});


Working with your code the way you had it, you could have done  
something like this:

$(document).ready(function(){
        $(".firstLine").click(function(){
                var el = $(this).next();
                if (el.is(":hidden")) {
                        el.slideDown("slow");
                } else {
                        el..slideup("slow");
                }
        });
});

You could also use a ternary operator to abbreviate the code a bit:

$(document).ready(function(){
        $(".firstLine").click(function(){
                var el = $(this).next();
                el[el.is(":hidden") ? "slideDown" : "slideUp"]("slow");
        });
});


Hope that helps.

--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Feb 23, 2008, at 12:28 PM, zephyr wrote:


Hi,I cannot get my finger behind this one:

I have this HTML:
<p class="firstLine">This is the first line of the first paragraph</p>
<p>And here is some more text. Bladibladibla</p>
<p class="firstLine">This is the first line of the secons paragraph</
p>
<p>And here is some more text. Bladibladibla</p>
<p class="firstLine">This is the first line of the third paragraph</p>
<p>And here is some more text. Bladibladibla</p>

when I click a <p> class firstLine, I want the paragraph immediately
_below_ it to disappear if it is visible. If it is invisible, I want
it to show again.

This
$(document).ready(function(){
        $(".firstLine").click(function(){
                var el = $(this).next();
                $("el:hidden").click.slideDown("slow");
                $("el:visible").click.slideup("slow");
        });
});

doesn't work.
How can I do this?

Thanks