I've created some spoilers that reveal information when clicked on.
When I clicked on spoiler1, the content slid underneath the other spoilers strangely.
Here's an example of what happened: http://gyazo.com/4571423534e2442dc960d119c668dfa8
Why is it doing this and how can I adjust it so that the spoilers beneath the one I'm opening slide down below the content?
My code:
<div id="container">
<div class="spoiler1"><span id="title1">This is a Test</div>
<span class="hide1">testttttttttttttttttttttt</span><!-- This is what opens after clicking on the spoiler -->
<br /><br />
<div class="spoiler2"><span id="title1">This is a Test</div>
<br /><br />
<div class="spoiler3"><span id="title1">This is a Test</div>
<br /><br />
<div class="spoiler4"><span id="title1">This is a Test</div>
<br /><br />
<br /><br />
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".hide1").hide();
$(".spoiler1").show();
$('.spoiler1').click(function(){
$(".hide1").slideToggle();
});
});
</script>
CSS:
#title1 {
color: #1794c8;
position: relative;
top: 10px;
left: 10px;
}
.spoiler1{
font-size: 16px;
background-color: #c0e6d2;
border: 1px solid #a7c8b7;
height: 45px;
width: 530px;
position: absolute;
text-shadow: 0px 1px 0px #f4f4f4;
filter: dropshadow(color=#fff, offx=0, offy=1);
z-index:1;
}
.spoiler2{
font-size: 16px;
background-color: #c0e6d2;
border: 1px solid #a7c8b7;
height: 45px;
width: 530px;
position: absolute;
text-shadow: 0px 1px 0px #f4f4f4;
filter: dropshadow(color=#fff, offx=0, offy=1);
}
.spoiler3{
font-size: 16px;
background-color: #c0e6d2;
border: 1px solid #a7c8b7;
height: 45px;
width: 530px;
position: absolute;
text-shadow: 0px 1px 0px #f4f4f4;
filter: dropshadow(color=#fff, offx=0, offy=1);
}
.spoiler4{
font-size: 16px;
background-color: #c0e6d2;
border: 1px solid #a7c8b7;
height: 45px;
width: 530px;
position: absolute;
text-shadow: 0px 1px 0px #f4f4f4;
filter: dropshadow(color=#fff, offx=0, offy=1);
}
Any suggestions on how to fix this issue would be greatly appreciated!
Thank you for your help.