Question

Heres the html:

<div id="mainDiv">
    <div id="showDiv"></div>
    <div id="filtersDiv">    
        <div id="hideDiv"></div>
    </div>
    <div id="contentDiv">
        <div id="headlineDiv">Block 1</div>
        <div id="storyDiv">Block 2</div>
    </div>     
</div>

Initially, showDiv is hidden, and in it’s place filtersDiv is displayed. Later, when the userr clicks on hideDiv, filtersDiv becomes hidden and showDiv becomes visible. However, when this happens, mainDiv’s height automatically increases to the height of “showDiv” + “contentDiv”. What I want is for these to be displayed side by side.

Heres the script:

 $('#hideDiv').click(function () {
          $('#hideDiv, #filtersDiv').hide("slide", { direction: "left" }, 1000, function () {
              $('#showFDiv').show();
          });
      });

I’m fairly new to jquery, any comments would help. Thanks.

Answer 1

Not sure whether this is what you are looking for.

Let me ask you first that Have those Divs been shown side-by-side in the first place?

If not, you have to make them:

#showDiv, #contentDiv, #filtersDiv { float:left;}

See : http://jsfiddle.net/sBv6f/2/