I have created a drop-down menu for my website, but I am facing an issue. When I click on the links again, it does not work properly because I lack expertise in JavaScript. I would appreciate any help and suggestions from all of you. Thank you for your time.
Below is the code I have used:
var hideall = $('#woman,#man,#device,#health,#living,#device');
$('#woman-li').click(function() {
$(hideall).hide(), $('#woman').show();
});
$("#man-li").click(function() {
$(hideall).hide(), $('#man').show();
});
$("#health-li").click(function() {
$(hideall).hide(), $('#health').show();
}); #woman,
#man,
#health,
#device,
#living {
display: none;
}<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a>
</li>
<li>
<a href="#"> <span id="woman-li">Woman</span>
</a>
</li>
<li>
<a href="#"> <span id="man-li">Man</span>
</a>
</li>
<li>
<a href="#"> <span id="health-li">Health</span>
</a>
</li>
</ul>
<div id='woman'>
<div class="tb-container">
<div class="tb-head">face</div>
<div class="tb-content">
<a href="#">
<p>face</p>
</a>
</div>
</div>
</div>
<div id='man'>
<div class="tb-container">
<div class="tb-head">face</div>
<div class="tb-content">
<a href="#">
<p>face</p>
</a>
</div>
</div>
</div>
<div id='health'>
<div class="tb-container">
<div class="tb-head">face</div>
<div class="tb-content">
<a href="#">
<p>face</p>
</a>
</div>
</div>
</div>