I have been exploring a jQuery function that toggles between hiding and showing different divs when a menu item is clicked.
However, I am facing an issue where clicking on the same menu item does not close the newly opened div as intended. Additionally, I would like to implement a hide function for the 'submit' div class when clicked.
Any tips or suggestions would be greatly appreciated.
https://jsfiddle.net/a9ykpdwz/
Jquery
$("#one, #two, #three").hide();
$(".one, .two, .three").click(function (e) {
e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(1000).siblings('#one, #two, #three').fadeOut(1000);
});
HTML
<div id="nav">
<a href="#" class="one">WORK</a>
<a href="#" class="two">ABOUT</a>
<a href="#" class="three">CONTACT</a>
</div>
<div id="one">
<ul>
<li>xx</li>
<li>Spaces</li>
<li>Form</li>
<li>Mind and Body</li>
<li>Moving Image</li>
<li>White Trails</li>
<li>Foreign Views</li>
<ul>
<div class="submit"> close </div>
</div>
<div id="two">Text</div>
<div id="three">Text</div>