here's my situation:So I'm trying to toggle a sidebar by clicking another div. It's a 100% height sidebar that is fixed to the right side of the viewport. Essentially I am trying to wrap a 300px div around both the 50px wide toggle div and the 250px wide sidebar div, and I want to hide the sidebar portion using a negative margin-right pixel value. Using the .toggle:active selector (so this occurs when the toggle div is clicked), I want to show the sidebar portion by setting that margin-right pixel value back to 0px.Code so far:\[code\]<div class="wrapper"> <a href="http://stackoverflow.com/questions/14450369/#"> <div class="toggle">Toggle</div> </a> <div class="cart">Cart</div></div>\[/code\]CSS so far:\[code\].wrapper { position:fixed; width:300px; height:100%; background-color
range; top:0; right:0; margin-right:-250px;}.toggle { position:relative; display:block; width:50px; height:100%; background-color:grey; float:left;}.toggle:active .wrapper { margin-right:0px;}.cart { position: relative; width:250px; height:100%; background-color:red; float:right;}\[/code\]Here's the jsfiddle!Here's my question:How can I target .wrapper to change a css attribute when .toggle:active is engaged? Also, how can I specify when the sidebar is visible and when it's not?I'm new to Javascript, but it seems like I'll need it to do this due to the callback function. If CSS-only is possible, I'd lean toward that solution. Please note that I want to use margin-right so that I can opt to use CSS transitions later to animate my element sliding left and right.
range; top:0; right:0; margin-right:-250px;}.toggle { position:relative; display:block; width:50px; height:100%; background-color:grey; float:left;}.toggle:active .wrapper { margin-right:0px;}.cart { position: relative; width:250px; height:100%; background-color:red; float:right;}\[/code\]Here's the jsfiddle!Here's my question:How can I target .wrapper to change a css attribute when .toggle:active is engaged? Also, how can I specify when the sidebar is visible and when it's not?I'm new to Javascript, but it seems like I'll need it to do this due to the callback function. If CSS-only is possible, I'd lean toward that solution. Please note that I want to use margin-right so that I can opt to use CSS transitions later to animate my element sliding left and right.