div slide open then close

Question

I have a two box, with the first box having an "Open" <button>

<div id="box1">
    <button id="open" type="button">Open</button>
</div>
<div id="box2"></div>

When clicking the "Open" <button> the first box will slide to the left by 50%, then change the "Open" to "Close" button. I came up with this jQuery solution:

$(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $('#close').on('click', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            // alert('done');
        });
    });
});

I managed to change the ID and text of the <button> (checked via Inspect Element). However when I click the "Close" <button> it is not working. What seems to be the problem in here? I even tried alert(1) on the $('#close') to see if it does see the Close ID but no luck.

jsFiddle here.

My account seems to be intimidating to answer because of poor reputation. However, I do marked an answer if I find it fit and answered my question. — fishcracker, Oct 19 '12 at 07:19
Bruv, everyone here are there to help you, nothing to do with reputation, I have **+1-ed** you, rest see my post below, hope I can help you `:)` — Tats_innit, Oct 19 '12 at 07:29

The Alpha · Answer 1 · 2012-10-19T07:49:35.037

3

If you change your

$('#close').on('click', function(){...});

to this

$('#box1').on('click', '#close', function(){...});

then this will work like this demo but also you can make it working in other ways like this demo.

edited Oct 19 '12 at 07:49

answered Oct 19 '12 at 07:35

The Alpha

143,660
29
287
307

Thanks for this, however I have hard time yet looking at those functions/classes. I prefer the simple way, for now. – fishcracker Oct 19 '12 at 08:01

score 1 · Answer 2 · answered Oct 19 '12 at 07:20

1

You need to use live().

Also make close animation right: '20%'

Working jsFiddle

answered Oct 19 '12 at 07:20

Ron van der Heijden

14,803
7
58
82

Its lil incorrect, Just an advise, `.live` is deprected from Jquery - *If Keen read this* - `:)` http://stackoverflow.com/questions/11115864/whats-wrong-with-the-jquery-live-method/11115926#11115926 *also* look into delegate, but I reckon main issue for OP is something else `:)` I thought I will mention it as an FYI only bruv. – Tats_innit Oct 19 '12 at 07:22

score 1 · Answer 3 · answered Oct 19 '12 at 07:20

try using toggle without changing it's id demo

$('#open').toggle(function() {
    $('#box1').animate({
        right: '50%'
    }, 500, function() {
        $('#open').text('Close');
    });
}, function(){
    $('#box1').animate({
        right: '20%'
    }, 500, function() {
        $('#open').text('Open');
    });
});

Tats_innit · Accepted Answer · 2012-10-19T07:42:50.493

1

Working Demo

Another demo thanks @Sheikh: DEMO

Hope it fits your cause :)

code

   $(function() {
    $('#open').on('click', function() {
        $('#box1').animate({
            right: '50%'
        }, 500, function() {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $(document).on('click', '#close', function() {
        $('#box1').animate({
            left: '50%'
        }, 500, function() {
            alert('done');
        });
    });
});

edited Oct 19 '12 at 07:42

answered Oct 19 '12 at 07:20

Tats_innit

33,991
10
71
77

1

Thanks Bruver @SheikhHeera `:)` for Edit! – Tats_innit Oct 19 '12 at 07:23
1

Thanks and Check your `demo` again and try to click on the `close` button several times. – The Alpha Oct 19 '12 at 07:40
Cheerios @SheikhHeera `:)` http://jsfiddle.net/TXyUM/ +1'd you and further it shall be remembered `:)` added `$(document).on('click', '#close', function() {...});` – Tats_innit Oct 19 '12 at 07:44
Although this seems to solve my problem, there is some kind of delay after clicking close before the closing animation. – fishcracker Oct 19 '12 at 08:02

score 1 · Answer 5 · answered Apr 18 '13 at 10:48

I came across this on Google when searching for a popup bottom sliding box.

I've adapted the above code and created a bottom slider that brings up an iframe, perfect if you want to display a quick survey about the page.

Demo: http://jsfiddle.net/redwall/r5FBm/3/

HTML:

<div id="box1">
<button id="open" type="button">Open</button>
<br />
<br />
<br />
<iframe src="http://www.example.com" width="100%" height="170" frameborder="0" scrolling="no">
    <p>Your browser does not support iframes.</p>
</iframe>

JAVA:

$(function () {
$('#open').on('click', function () {
    $('#box1').animate({
        height: '230px'
    }, 500, function () {
        $('#open').text('Close').attr('id', 'close');
    });
});

$('#box1').on('click', '#close', function () {
    $('#box1').animate({
        height: '50px'
    }, 500, function () {
        $('#close').text('Open').attr('id', 'open');
    });
});

});

CSS:

    #box1 {
    position:absolute;
    bottom:0;
    height:50px;
    width:100%;
    background:#FF800D;
    overflow:hidden;
}
button {
    position:absolute;
    right:0;
}

div slide open then close

5 Answers5