I've been working on a website that incorporates the jQuery "Slide" effect. I have implemented this effect multiple times, using it on 3 different div tags. Each line consists of one "Dynamic" div tag (the moving one) and one "Static" div tag (the trigger). However, I have encountered an issue where when the "Dynamic" div tag hides after the "Static" one is clicked, the next "Static" div tag moves up a line, resulting in a messy appearance. I will provide a link to a JSFiddle at the end if my explanation is unclear. Simply click on the thin div to move the thicker ones.
The HTML:
<div class="tabs">
<div id="static1" class="static"></div>
<div id="dynamic1" class="dynamic"></div>
<br><div id="static2" class="static"></div>
<div id="dynamic2" class="dynamic"></div>
<br><div id="static3" class="static"></div>
<div id="dynamic3" class="dynamic"></div>
</div>
The JS:
$("#static1").click(function() {
$("#dynamic1").toggle("slide", { direction: "right" }, 1000);
});
$("#static2").click(function() {
$("#dynamic2").toggle("slide", { direction: "right" }, 1000);
});
$("#static3").click(function() {
$("#dynamic3").toggle("slide", { direction: "right" }, 1000);
});
The CSS:
.dynamic {
overflow: hidden;
width: 100px;
height: 150px;
background: #ccc;
border-top:1px solid #000;
border-right:0px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}
.static {
width: 20px;
height: 150px;
background: #ccc;
border: 1px solid #000;
float: right;
background:url('../img/bg_tile.jpg') #333d43;
}
.tabs {
overflow: hidden;
float: right;
}
JSFiddle: http://jsfiddle.net/3T9je/