Jsfiddle has a feature that allows the user to resize the windows for HTML, Javascript, CSS, and Result. I am trying to implement a similar feature in my website, with an article and comments. The comments bar is dragged horizontally to enlarge the comments section, or enlarge the article.

I actually have a somewhat working drag bar in jsfiddle itself (this is heavily simplified):

http://jsfiddle.net/Gp5as/2/

The problem is, the blue comments section is covered up by 25px, so when the bar is dragged to the right, the comments section is asymmetric.

There are 2 main pieces:

<div class="main">
  ...
</div>

and

<div id="sidebar">
  <span id="position"></span>
  <div id="dragbar"><div id="dragtext">Comments</div></div>
  <div id="comment-container">
    <div id="comment">
      Comments
    </div>
  </div>
</div>

The main is for the article, and the sidebar is for the comments. The drag bar is inside the sidebar float: left.

I am wondering how to implement their drag feature for my own purposes. You can modify my jsfiddle example, or create a jsfiddle example that would be easy to cut and paste into.

jquery css jsfiddle
Edit
Report