Question

I have a left navigator that I want to make it hide on a user command.

http://jsfiddle.net/Ktqbz/

the “I hide the nav” button should stay visible after it is clicked staying at the same vertical space and reposition itself to the original location when the nav is shown again. How can I accomplish this? I can change the html if needed, I know that when you have display:none, none of its children will be displayed, the flow is also altered so the button wont stay in the same vertical spot. I can change the design too so if you have a better idea I’m all ears. However, this should be as friendly for the user as possible, if I move the button from its vertical spot, people might be confused, thats why I want to keep it there.

Answer 1

The issue is mainly with your markup. the “I hide the nav button” is contained withing #leftNavigator, so when you hide the #leftNavigator you are also hiding the button that you want to stay visible. There are a number of way to modify your markup to make this work.

Essentially I just created a wrapper for the navigator and positioned it relatively, and within it I positioned the “I hide the nav button” absolutely. I also added a top margin to the two control panel buttons so that they leave room for the “I hide the nav” button. There are a lot of ways of making this work.

#leftNavigator{float:left; width:100%; background-color:red;}
#top{height:150px; background-color:blue;}
#controlPanel{height:50px; background-color:gray;}
#tree{background-color:green;}
#content{overflow:auto; background-color:coffee;}
#btn{z-index:10;position:absolute;top:150px;}
​#navigator_wrapper{position:relative;height:150px;width:20%}
#controlPanel button {margin-top:25px;}

​

<div id="navigator_wrapper">
    <button id="btn">I hide the nav</button>
    <div id="leftNavigator">
        <div id="top">I have an image</div>
        <div id="controlPanel"><button>Other</button><button>controls</button></div>
        <div id="tree">I'm a jstree</div>    
    </div>
</diV>
<div id="content">
    I take all the space I want. Except for leftNavigator's space.
</div>​​​​​​​​​​​​​​​

HERE is a jfiddle http://jsfiddle.net/samisadaka/9c7va/