Question

I am trying to do a basic div layout and would like to use plain javascript or jquery to mimic the functionality on this page
http://octopress.org/blog/archives/

There is a content wrapper div and a left article column and a right sidebar column. There is also a skinny div in-between the left and right div that can be clicked on, once clicked on, it either closes or expands the right side div.

The page flow…

1) On page load the right side div should be open.

2)
Once you click the middle div it closes the right side div and expands the left side div’s width to cover the space of the left + right side div. The middle div still is visibable, so you can click it again to expand the div back out

3) Also once you click the middle div to collaps the right side div, it collapses it, but it also puts the contents of that div, underneith the left main column div. Like the right side div I think has a float:left valuse so once the left div is expanded, it will push that div down underneith the left div

4) With right side div collapsed, you can click the middle div which is now hugging the right side border of the main div wrapper, it will then resive the left div back down small to allow the right div to fit back into place again

It probably sounds more complicated then it is to describe what I am looking to do, if you view the link though http://octopress.org/blog/archives/ it does exactly what I am talking about.

I have tried disecting the page and rebuilding just the part I am after without any luck, I would really appreciate any help in a doing this with jquery, as well as how to do the css for the divs.

I have seen some plugins that do similar work but not the same, please help if you can

Here are some screen shots of the different phases I am after…

I appears that I just need to have the javascript add and remove some css rules when the middle div is clicked.

Answer 1

the key for the layout is to use negative margin on the sidebar.

You could see the simplified layout example here:

http://jsfiddle.net/9FUQA/

The html

<div id="wrapper">
  <div id="content">
    <div class="left_column"></div>
    <div class="right_column"></div>
    <span class="toggle_sidebar"></span>
  </div>
</div>

The CSS. First you float both column, and you set the width on the right column and a 100% nagetive margin-right to bring the right column onto the same line as the left-column.

On collapse, you remove both the float and negative margin-right on right-column, and it falls into the normal block flow.

#content {
  width:500px;
  margin-right:200px;
  position:relative;
}

.left_column {
  width:100%;
  float:left;

}

.right_column {
  width:160px;
  padding:0 20px;
  margin:0 -100% 0 0;
  float:left;
}

.toggle_sidebar {
  position:absolute;
  top:0;
  bottom:0;
  right:-10px;

}

.collapse .right_column {
  float: none;
  width: auto;
  clear: left;
  margin: 0;
}

.collapse #content {
  margin-right:20px;
}
.collapse .toggle_sidebar {
  right: -20px;
  width: 19px;
}

The JS

$(document).ready(function () {
  $('.toggle_sidebar').click(function(event) {
      $('#wrapper').toggleClass('collapse');
  });
}); 

You could see the simplified layout example here:

http://jsfiddle.net/9FUQA/