CODEWITHSUNDEEP
jqueryhtmlbuttontoggleslide
Caro
Caro

Reputation: 45

Add closing button to open slidetoggle div

I have this code: 

$('.open-mypage1').click(function () {
   $('#mypage-info1').slideToggle('2000', "swing", function () {
        // Animation complete.
   });
});   

http://jsfiddle.net/haifisch/q59dz078/4/

It works fine, but instead of clicking the "open my page?" button to close the toggled div, I would like to have a seperate "close" button within the opened div.

How can I achieve this?

Upvotes: 0

Views: 1872

Answers (2)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

You can use slideUp and slideDown insetad of the slideToggle. On click to open the content div you will have slideDown or opening the div, and on close you will have the slideUp for closing the content div.

Example here http://jsfiddle.net/q59dz078/5/

$('.open-mypage1').on('click', function (e) {
    $('#mypage-info1').stop().slideDown('2000', "swing");
    e.preventDefault();
});

$('.close-mypage1').on('click', function (e) {
    $('#mypage-info1').stop().slideUp('2000', "swing");
    e.preventDefault();
});

Upvotes: 0

j08691
j08691

Reputation: 208002

You could do it like this:

$('.open-mypage1,#mypage-info1 button').click(toggleDiv);
function toggleDiv(){
 $('#mypage-info1').slideToggle('2000', "swing", function () {
        // Animation complete.
    });
}

jsFiddle example

Or if you solely want the text to open it and the button to close it, you could use:

$('.open-mypage1').click(function(){
    $('#mypage-info1').slideDown('2000', "swing", function () {
        // Animation complete.
    });
});
$('#mypage-info1 button').click(function(){
    $('#mypage-info1').slideUp('2000', "swing", function () {
        // Animation complete.
    });
});

jsFiddle example

Upvotes: 2

Related Questions