CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggle
JinSnow
JinSnow

Reputation: 1663

jquery slide toggle : hidden + new link

What should I add to the jquery below to get the "show" link to disapear once the toggle is open AND to add a "close" link at the end of the "blablabla" in order to be able to close the toggle)(keeping the slow effect)

jQuery:

var $j = jQuery.noConflict();
$j(function(){
    $j('#containertoggle').on('click', 'a.opener', function(){
        $j(this).next().toggle('slow')
    });
});

HTML : 

<ul id="containertoggle">
    <li>
        <a class="opener">show</a>
        <div style="display: none;">
            <p>blablablabla</p>
        </div>
    </li>
    <li>
        <a class="opener">show</a>
        <div style="display: none;">
            <p>blablablabla</p>
        </div>
    </li>
</ul>

Upvotes: 2

Views: 290

Answers (2)

Sushanth --
Sushanth --

Reputation: 55750

You can try this approach.

Also it is a better idea to avoid adding styles to the style attribute. Use classes instead.

var $j = jQuery.noConflict();
$j(function () {
    $j('#containertoggle').on('click', 'a.opener', function () {    
        var $this = $j(this);
        $this.next('div').show('slow');
        $this.nextAll('a.closer').first().removeClass('hide');
        $this.addClass('hide');
    });

    $j('#containertoggle').on('click', 'a.closer', function () {       
        var $this = $j(this);
        $this.prev('div').hide('slow');
        $this.prevAll('a.opener').first().removeClass('hide');
        $this.addClass('hide');
    });
});

Check Fiddle

Upvotes: 1

j08691
j08691

Reputation: 207901

Try this:

var $j = jQuery.noConflict();
$j('#containertoggle').on('click', 'a.opener', function () {
     $j(this).next().toggle('slow').find('p').append('<span> close</span>');
     $j(this).hide();
 });
 $j('#containertoggle').on('click', 'span', function () {
     $j(this).closest('div').toggle('slow').closest('li').find('a').show();
     $j(this).remove();
 });

jsFiddle example

Upvotes: 1

Related Questions