Expand/Collapse Div

Question

I am trying to create two buttons, one that will expand a div and one that will collapse it. I've tried to modify this code, but I cant seem to get it to work. I think I just dont understand how to not toggle a link.

I am also trying to make the DIV appear when the page loads. I'm not even sure if this is possible with the way I am writing the code.

Can anyone help me understand what I need to do to get this to work.

http://jsfiddle.net/XUjAH/93/

I am trying to avoid using .slideUp/.slideDown it seems to be interfering with another plugin I am using on the page.

  $('#click-meopen').click(function() {
    var height = $("#this").height();
    if( height > 0 ) {
        $('#this').css('height','0');
    } else {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    }
});

$('#click-meclose').click(function() {
    var height = $("#this").height();
    if( height > 0 ) {
        $('#this').css('height','0');
    } else {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    }
});

Answer 1

All following text is just IMHO :)

See my exmple here - http://jsfiddle.net/XUjAH/99/

html:

<p id="click-meopen">click me to open</p>
<p id="click-meclose">click me to close</p>
<div id="this">
    <div id="content">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
</div>

as for JS:

$('#click-meopen').click(function() {
    $("#this").height($("#content").height());

});
$('#click-meopen').click();

$('#click-meclose').click(function() {
    $("#this").height('0');
});​

as for CSS it should be the same you have.

UPD : Seems that animation is a bit flaky - when you set 'height: auto' - div is visible from the beginning, however close button ignores animation on first click(I have Chrome with latest update) so I've added some workaround. Also added other styles to support this animation for other browsers like Firefox and Opera and not only for those who support -webkit.

http://jsfiddle.net/XUjAH/110/

in CSS added class and removed 'transition' from the main style:

.with-animation {
    -webkit-transition: height 1s ease-in-out;
    -moz-transition: height 1s ease-in-out;
    -o-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
}

In JS: // However our div already have proper size this line // prevents instantaneous close on first click, don't know why $("#container").height($("#content").height());

$('#click-meopen').click(function() {
    $("#container").height($("#content").height()); 
});

$('#click-meclose').click(function() {
    // If we add class with-animation on upper level div will
    // start animation on page load
    $("#container").height('0').addClass("with-animation");
});

​

Answer 2

If you can use toggle then all you need is $("#this").toggle('slow'); , but you must replace height: 0; with display: none;

Answer 3

You are trying to change this to buttons ?

<input type="submit" id="click-meopen" value="open"></input>
<input type="submit" id="click-meclose" value="close"></input>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>

That's not hard to do.

I would also recommend you to use .toggle() or the .show(),.hide() methods of jQuery. Just setting the css height property to zero is not a good practice.

Do you want to show the div when the page is loading or when its finished loading ( the DOM is ready) ?

Your JavaScript code would be:

$('#click-meopen').click(function() {
    $('#this').show(); // or .toggle()
});

$('#click-meclose').click(function() {
    $('#this').hide(); // or .toggle()
});​

If you would use only one button you should use the .toggle() method, otherwise stick with the .show(),.hide() method !

When the DOM is ready ( The Page is loaded completely):

$(document).ready(function(){
     $('#this').show();
});

documentation of the methods that are used:

• http://api.jquery.com/show/
• http://api.jquery.com/hide/
• http://api.jquery.com/toggle-event/
• http://api.jquery.com/ready/

Answer 4

$('#click-meopen').click(function() {
    $('#this').show();
});

$('#click-meclose').click(function() {
    $('#this').hide();
});​

http://jsfiddle.net/XUjAH/95/

Or with toggle

$('#click-meopen').click(function() {
    $('#this').toggle();
});

http://jsfiddle.net/XUjAH/96/

Answer 5

I see that you have used -webkit-transition which works for me in chrome but i guess you want it to work in other browses than webkit.

There are two ways i can suggest, one is to just simply add -moz-transition: height 1s ease-in-out; and transition: height 1s ease-in-out; to do it with css3 but that wont help in older ie browsers.

An other way is to place a div inside your text in the div you want to collapse:

<div id="this">
    <div id="height">
         text
         text
     </div>
</div>

then in your javascript you can get the height of the inner div-element, and in that way you can use animate instead of height: auto.

$('#click-meopen').click(function() {
    $('#this').animate({'height': $('#height').height()}, 1000);
});

$('#click-meclose').click(function() {
    $('#this').animate({'height': 0}, 1000);
});

that should be enough for you.

​

Answer 6

    $('#click-meopen').click(function() {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    });

    $('#click-meclose').click(function() {
        $('#this').css('height','0');
    });

    $('#click-meopen').click();

http://jsfiddle.net/XUjAH/100/