CODEWITHSUNDEEP
jquery
user2992367
user2992367

Reputation: 1

Toggle between two divs with content

I have two divs which I want to toggle between.

The main div is for the side navigation and also contains an image and menu list.

I can make the two divs toggle but the content inside the main div doesn't toggle too.

<div class="wide">
<img src="images/logo150.png" width="150" height="90">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Latest News</a></li>
</ul>
</div>

<script>
$( ".wide" ).click(function() {  
$( this ).toggleClass( "narrow", 1000, "easeOutSine" );
});
</script>

<style>
html {
margin: 0px;
padding: 0px;
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
background-image: url(load/images/1.jpg);
background-repeat: no-repeat;
background-position: left top;
}   
.wide {
width: 150px;
height: 100%;
position: fixed;
z-index: 1000;
min-height: 1000%;
background-color: rgba(0,0,0,0.8);
padding-top: 50px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
cursor: pointer;
}  
.narrow {
width: 50px;
height: 100%;
position: fixed;
z-index: 10;
min-height: 1000%;
padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
cursor: pointer;
background-color: rgba(0,0,0,0.8);
background-image: url(logotop.png);
background-repeat: no-repeat;
background-position: center top;
}  
</style>

http://jsfiddle.net/jCcg7/

Any help greatly appreciated as I'm new to jQuery and am sure this can be done.

Thank you

Upvotes: 0

Views: 134

Answers (2)

PJ42
PJ42

Reputation: 46

You are toggling the class of the containing element (.wide) to 50px wide, but the contents (e.g. img) are fixed at 150px - therefore they will overflow.

In the .narrow class you need to hide this overflow using:

overflow: hidden;

Upvotes: 1

Duncan McArdle
Duncan McArdle

Reputation: 521

You need to hide the "overflow" of the shrinking element using a CSS rule.

overflow:hidden; /* Inside .narrow */

See here: http://jsfiddle.net/jCcg7/3/

Upvotes: 1

Related Questions