I am looking to enhance this toggle function by making the div content retract and hide when the same link is clicked again. Additionally, I would like it to retract completely when a different link is clicked before the associated content slides down.
Furthermore, I want to learn how to change the color of the link to a different color when its content is visible.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function slideonlyonee(thechoseone) {
$('.newframe').each(function(index) {
if ($(this).attr("id") == thechoseone) {
$(this).delay(400).slideDown(500);
}
else {
$(this).slideUp(500);
}
});
}
</script>
</head>
<body>
<!--COMEDY STARTS HERE-->
<div style="position:relative; top:2px; left:10px;">
<a id="myframe" style="text-decoration: none; "
href="javascript:slideonlyonee('newframe2');"><span style="color:blue;">comedy</span>
</a>
<div class="newframe" id="newframe2" style="background: blue; display:none; block;
padding: 5px; width: 450px; height:500px; position: relative; left:-5px; top:60px;">
</div>
</div>
<!--DRAMA STARTS HERE-->
<div style="position:absolute; top:10px; left:144px;">
<a id="myframe" style="text-decoration: none;"
href="javascript:slideonlyonee('newframe3');"><span style="color:red;">drama</span></a>
<div class="newframe" id="newframe3" style="background: red; display:none; block;
padding: 5px; width: 450px; height:500px; position: relative; left:-131px; top:60px;">
</div>
</div>
<!--CRIME STARTS HERE-->
<div style="position:absolute; top:10px; left:283px;">
<a id="myframe" style="text-decoration: none;"
href="javascript:slideonlyonee('newframe4');"><span style="color:green;">crime</a>
<div class="newframe" id="newframe4" style="background: green; display:none; block;
padding: 5px; width: 450px; height:500px; position: relative; left:-270px; top:60px;">
</div>
</div>
<!--MAKEOVER STARTS HERE-->
<div style="position:absolute; top:10px; left:407px;">
<a id="myframe" style="text-decoration: none;"
href="javascript:slideonlyonee('newframe5');"><span style="color:purple;">makeover</a>
<div class="newframe" id="newframe5" style="background: purple; display:none; block;
padding: 5px; width: 450px; height:500px; position: relative; left:-394px; top:60px;">
</div>
</div>
</body>
</html>
FIND THE FUNCTIONING CODE HERE
I appreciate any assistance in advance!