My current code involves clicking on a menu, which should reveal a list where each item has a corresponding section that slides down and slides back up when clicked. However, only the sliding down functionality is working at the moment. I'm new to jQuery, so please go easy on me! I would prefer not to make significant changes to my code as I might get stuck again if I do. If possible, thank you in advance!
jQuery(document).ready(function(){
jQuery(".menu-trigger").click(function() {
$(".menu-trigger").hide("scale")
jQuery(".test").slideToggle(900, function ([complete]){
jQuery(this).toggleClass(".test").css("display");
})
});
});
jQuery(document).ready(function(){
jQuery(".bio-button").click(function() {
jQuery(".bio-content").slideToggle(900, function ([complete]){
jQuery(this).toggleClass(".bio-content").css("display");
})
});
});
jQuery(document).ready(function(){
jQuery(".drums-button").click(function() {
jQuery(".drums-content").slideToggle(900, function ([complete]){
jQuery(this).toggleClass(".drums-content").css("display");
})
});
});
jQuery(document).ready(function(){
jQuery(".info-button").click(function() {
jQuery(".info-content").slideToggle(900, function ([complete]){
jQuery(this).toggleClass(".info-content").css("display");
})
});
});
function changeImage(){
var ima = document.getElementById("BSlate");
if (ima.src.match('BIDSlate')){
(ima.src ="img/BSlate.png").fadeIn(1200);
}
else
(ima.src ="img/BIDSlate.png").fadeIn(1200);
}.bio-content{
height:400px;
background-color:rgba(255,255,255,0.5);
width:100%;
display:none;
margin:0;
padding:0;
}
.info-content{
height:800px;
background-color:rgba(0,0,0,0.5);
width:100%;
display:none;
margin:0;
padding:0;
}
.drums-content {
height:400px;
background-color:rgba(255,255,255,0.5);
width:100%;
display:none;
margin:0;
padding:0;
}<!-------------- MY HTML -------------------->
<div id="menuwrapper"><!-----------MENU START------------>
<img id="BSlate" src="img/BSlate.png" style="max-width:100%" />
</div>
<div class="test">
<ul>
<li class="bio-button">Biography</li>
<li class="info-button">Info</li>
<li class="drums-button">Drums</li>
</ul>
<div class="bio-content"></div>
<div class="info-content"></div>
<div class="drums-content"></div>
</div>
<span class="menu-trigger" onclick="changeImage()"><h1 class="menu-button">MENU</h1></span><!-----------END MENU------------>