Currently, I am working on implementing hide and show functionality in my project. However, I have come across a bug in my code that I need assistance with. When clicking on the first div element, the content opens from bottom to top instead of the desired top to bottom effect. On the other hand, clicking on the second div causes it to open from right to left, which should also be corrected to open from top to bottom.
To view the code snippet, please click on the following link:
<div id='firstRadio'>
<div class="first"> First </div>
<div class="arrow-down"></div>
</div>
$(document).ready(function() {
$("#firstRadio").click(function() {
$("#secondHiddenDiv").hide("slow");
$("#firstHiddenDiv").show("slow");
});
$("#secondRadio").click(function() {
$("#firstHiddenDiv").hide("slow");
$("#secondHiddenDiv").show("slow");
});
$("#thirdRadio").click(function() {
$("#firstHiddenDiv, #secondHiddenDiv").hide("slow");
});
});