Show layer in another layer place, and hide the new layer from button
Hi all,
I have Button A and aside, Layer 1 to start with.
If I click Button A I need Layer 1 to hide and Layer 2 to be shown in its place.
Inside of Layer 2 there's Button B.
If I click Button B, Layer 2 has to hide and Layer 1 has to show in it's place.
The attached image will give you a further view.
How can I do this? I was about to post some of my code but the only thing I have come around is to show and hide from the same button :(
Thanks a lot!
showHideLayers.gif
I have Button A and aside, Layer 1 to start with.
If I click Button A I need Layer 1 to hide and Layer 2 to be shown in its place.
Inside of Layer 2 there's Button B.
If I click Button B, Layer 2 has to hide and Layer 1 has to show in it's place.
The attached image will give you a further view.
How can I do this? I was about to post some of my code but the only thing I have come around is to show and hide from the same button :(
Thanks a lot!
showHideLayers.gif
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Awesome! thank you!
Since you are using jQuery, this is a better way to do it
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#div1, #div2 {
position:absolute;
top:150;
left:150px;
margin: 10px;
padding: 10px;
border: 2px solid gray;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#div2').css('display','none');
$('#buttonA').click(function() { $('#div1').css('display','none'); $('#div2').css('display',''); });
$('#buttonB').click(function() { $('#div2').css('display','none'); $('#div1').css('display',''); });
});
</script>
<input type="button" id="buttonA" value="Button A" />
<div id="div1">I'm Layer1</div>
<div id="div2">I'm Layer2<br/><input type="button" id="buttonB" value="Button B" /></div>
<div id="layer1" style="left:100px; top:20px;"\>
<div id="layer2" style="left:100px; top:40px;"\>
<a id='buttonA'>
<a id='buttonB'>
$("#buttonA").bind("click"
var layer1 = $("#layer1");
var layer2 = $("#layer2");
var left = layer1.css("left");
var top = layer1.css("top");
$("#layer1").css ("display", "none");
$("#layer2").css ("left", left + "px");
$("#layer2").css ("top", top + "px");
});
$("#buttonB").bind("click"
var layer2 = $("#layer1");
var layer1 = $("#layer2");
var left = layer1.css("left");
var top = layer1.css("top");
$("#layer1").css ("display", "none");
$("#layer2").css ("left", left + "px");
$("#layer2").css ("top", top + "px");
});