Is there a way to hide the current div once you click on a new div that reveals another one? The code below toggles the display of the div, but what I am attempting to achieve is that when you click on a new item after clicking on the first one, the first item should hide. How can this be implemented?
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
function myDIVS() {
var x = document.getElementById("myDIVS");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}<ul class="career-list">
<li class="career-item"> <a href="#" onclick="myFunction()"> Foreman </a> </li>
<li class="career-item"> <a href="#" onclick="myDIVS()"> Foreman </a> </li>
</ul>
<div class="col-md-8 Info-div" id="myDIV">
<h3> SEND US YOUR RESUME </h3>
</div>
<div class="col-md-8 Info-div" id="myDIVS">
<h3> SEND US YOUR RESUME TWO </h3>
</div>Second Code (Doesn't close when clicking the same item)
HTML
<ul class="career-list">
<li class="career-item"> <a href="javascript:void(0);" data-id="myDIV"> Foreman </a> </li>
<li class="career-item"> <a href="javascript:void(0);" data-id="myDIVS"> Foreman </a> </li>
<li class="career-item"> <a href="javascript:void(0);" data-id="myDIVSS"> Foreman </a> </li>
<li class="career-item"> Foreman </li>
</ul>
Javascript
$(document).ready(function() {
$('ul li').click(function() {
$('.Info-div').hide();
$('#' + $(this).find('a').data('id')).show();
});
});