Question

So I have a classic “more/less” paragraph here:

http://jsfiddle.net/dVFaV/38/

When I click on “More info” the link reveals some content and at the same time it switches to “Less info” but I only want this to happen to one link at a time, as I will have more paragraphs on my page. Right now when I click on the “More info” link, the other one will switch too, which is what I’m trying to avoid.

Any help appreciated!!!

Answer 1

Why dont you use toggle() and slideToggle()?

HTML

<p class="adv-toggle-buttons">
    <a href="#">[+] More info</a>
    <a href="#" style="display: none;">[-] Less info</a>
</p>
<div class="adv-unit-options" style="display: none;">Lorem ipsum</div>

<p class="adv-toggle-buttons">             
    <a href="#">[+] More info</a>
    <a href="#" style="display: none;">[-] Less info</a>
</p>
<div class="adv-unit-options" style="display: none;">Lorem ipsum</div>

jQuery

$('.adv-toggle-buttons a').each(function() { 
    $(this).on('click', function(){
        $(this).parent().next().slideToggle();
        $(this).parent().find('a').each(function(){
            $(this).toggle();

        });
    });   
});

​

Fiddle

http://jsfiddle.net/dVFaV/40/