Just starting out with jQuery and I've come across a few examples of slideToggle but they are all overlapping. Here's the code I have so far:
jQuery:
<script src="jquery-1.9.1.js">
</script>
<script>
$ (document).ready(function(){
$("#about").click(function(){
$("#aboutp").slideToggle("medium");
});
});
</script>
<script>
$(document).ready(function () {
$("#discounts").click(function () {
$("#discountsp").slideToggle("medium");
});
});
</script>
<script>
$ (document).ready(function(){
$("#news").click(function(){
$("#newsp").slideToggle("medium");
});
});
</script>
HTML:
<div id="about">About Us</div>
<div id="aboutp">this is us guys</div>
<div id="discounts">Discounts</div>
<div id="discountsp">Discounts...blah blah blah blah blah</div>
<div id="news">News</div>
<div id="newsp">Here is the News!!</div>
(the p at the end of about, discounts, and news are basically the information or paragraph divs that will get hidden and shown when the others get clicked)
CSS:
#about,#discounts,#news {
position: fixed;
top: 100px;
background-color:LightBlue;
z-index: 11;
}
#about {
right: 10px;
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
#discounts {
right: 150px;
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
#news {
right: 300px;
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
#newsp,#discountsp,#aboutp {
top: 300px;
right: 50px;
position: fixed;
display: none;
}