CODEWITHSUNDEEP
jqueryhtmlcss
williamsongibson
williamsongibson

Reputation: 277

Hiding and showing DIV with jQuery without using display:none

I'm using the standard:

$(document).ready(function() {
   $('#toggleme').click(function(){
     $('div.#showhide').toggle();
   });
 $('#closer').click(function(){
     $('div.#showhide').toggle();
   });
 });

To show and hide a div, but when the site is set to display:none; the div disapears and all of my content moves up the page.

Is there a different way of showing/hiding the div, or should I wrap each div in a parent div with a fixed width/height?

Upvotes: 2

Views: 2482

Answers (5)

SpYk3HH
SpYk3HH

Reputation: 22570

Maybe try this:

$(document).ready(function() {

    $('#toggleme').toggle(function(){
        $('.showhide').animate({ "height", "0px" });
    },
    function(){
        $('.showhide').animate({ "height", "SomeBaseHeightpx" });
    });

    $('#closer').toggle(function(){
        $('.showhide').animate({ "height", "0px" });
    },
    function(){
        $('.showhide').animate({ "height", "SomeBaseHeightpx" });
    });

});

Play with it some and adjust it to your HTML, but that should do exactly what you want.

See more at jQuery .animate() && jQuery .toggle() [event]

Upvotes: 0

Krishnanunni P V
Krishnanunni P V

Reputation: 699

You can use jQuery.show()and jQuery.hide() methods for showing and hiding the elements respectively.

Upvotes: 0

egbrad
egbrad

Reputation: 2407

Set visibility to hidden like this:

$('div.#showhide').css('visibility', 'hidden');

Show it again like this:

$('div.#showhide').css('visibility', 'visible');

Upvotes: 0

Andy
Andy

Reputation: 14575

CSS attribute visibility: hidden; is what you want, it will hide it like display block but the space will still be there so no content moves.

Upvotes: 2

Pranay Rana
Pranay Rana

Reputation: 176886

make use of .show() and hide() method for that

.show() - Display the matched elements.

.hide() - Hide the matched elements.

or also try out

.toggle() - Display or hide the matched elements

Upvotes: 1

Related Questions