Question

I’m using jQuery to add a Class to a few elements.

I’m not new to adding classes, nor removing them. But I’m still somewhat intermediate with styles and any flexibility styles can perform to single elements.

Here’s what’s going on:

I have 2 Divs that I’m affecting with jQuery:

<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>

In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px

Here’s my styles:

<style>
#columnleft {
  float:left; 
  position:relative;
  text-align:left;
  width:155px; 
}

#columncenter {  
  position:relative; 
  padding-bottom:50px
  margin:0; 
  margin-left:162px; 
}
</style>

I’m basically toggling these 2 divs with the jQuery examples below:

So far I’ve gotten these 2 separate instances to work:

$("#columnleft").hide();
$("#columncenter").css("margin","0px");

then……..

$("#columnleft").show();
$("#columncenter").css("margin-left","162px");

Though this works, I’m not quite satisfied.
I’d prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.

It’s all fine with the example above, when I’m only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.

All I could come up with is:

<style>
.disappear { display:none; }
.maximize { margin:0px;  margin-left:0px; }
</style>

When the page loads:

<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>

it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.

Column Center hates me!
Does anyone see where I’m missing the mark?

Answer 1

View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/

What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:

<div class="hide-left">
    <div id="columnleft">stuff in here</div>
    <div id="columncenter">bigger stuff in here</div>
</div>

​
Then add the following CSS:

.show-left #columnleft {
    display: block;
}
.show-left #columncenter {
    margin-left: 162px; 
}

.hide-left #columnleft {
    display: none;
}
.hide-left #columncenter {
    margin-left: 0; 
}

You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.

What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS – when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.