CODEWITHSUNDEEP
jqueryaccordion
Bert Murphy
Bert Murphy

Reputation: 37

Jquery accordion - open and close button

Question Answered in comments below. See the link to the Fiddle

I'm looking for a little help with the below bit of jquery.

In short what I want to happen is that when the About button is clicked it opens an accordion (.toggle-container) that contains text and a Close button. (That part I can do.) The tricky part is that at this point I want the About button to disappear up until the accordion is again closed.

You can see from the fiddle that odd stuff is happening.

There will be multiple sections on the page and only one section should be opened at a time.

Fiddle

<section class="staff-member">
<figure>
    <h2>:(</h2>
    <figcaption>
        <a class="open-profile" href="">About</a>
            <div class="toggle-container">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet, enim at hendrerit bibendum, leo turpis feugiat risus, id sagittis eros urna auctor lorem. Suspendisse interdum turpis ut est auctor dignissim.</p>
                <a class="close-profile" href="">Close</a>
            </div>
    </figcaption>
</figure>
</section>

(function($, document, undefined){
$('.toggle-container').each(function() {
var $container = $(this);
var $open = $container.siblings('.open-profile');
var $close = $container.find('.close-profile');

$open.on('click', function(e) {
    e.preventDefault();
    $open.hide();
    $container.slideUp('fast');
});
$close.on('click', function(e) {
    e.preventDefault();
    $container.slideDown('fast');
    $open.show();
});
});
})(jQuery, document);

Upvotes: 0

Views: 4097

Answers (1)

Praveen
Praveen

Reputation: 56539

1) From your fiddle, you have misplaced the .slideDown and slideUp.

2 No need to hide the About and close.

$open.on('click', function(e) {
        e.preventDefault();
        $container.slideDown('fast');  //corrected it
    });
    $close.on('click', function(e) {
        e.preventDefault();
        $container.slideUp('fast');   //corrected it

    });

Check this JSFiddle

Updates: Since you need to hide the link just get rid of my 2nd point.

open.on('click', function(e) {
        e.preventDefault();
        $open.hide();   // don't remove        
        $container.slideDown('fast'); //corrected it
    });
    $close.on('click', function(e) {
        e.preventDefault();
        $container.slideUp('fast'); //corrected it
        $open.show();   // don't remove
    });

Upvotes: 2

Related Questions