Question

I have the following HTML:

<section id="sidebar" class="grid_3">
<section id="content" class="grid_9">

I used jQuery to change this to:

<section id="sidebar" class="" style="width: 0px;">
<section id="content" class="grid_12">

However it seems like the section with id of sidebar still has some width and the elements inside it appear.

Is there some way that I can make the contents of id=sidebar just not visible using jQuery? I thought giving it a width of 0px would make it work but it seems not to. What I was wondering about was setting the display to hidden or visibility but I am not sure of the differences between hidden and visible? Also not sure about the jQuery show and hidden. Which would be best in this case?

Answer 1

$("#sidebar").hide() // sets the position of the element to `display: none`;
$("#sidebar").show() // sets the position of the element to `display: block`;
$("#sidebar").css('width', '0 !important') // sets the width of the element to `0` and overrides other element's width properties;
$("#sidebar").css('visibility', 'hidden') // The element is invisible but still takes up space;

how can I detect if the display is set to "none" with jQuery?

try this:

if ($('.grid_3').is(':hidden')) { // if the element is hidden do something here}
if ($('.grid_3').is(':visible')) { // if the element is visible do something here}