CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Filipino Brigade
Filipino Brigade

Reputation: 27

How to hide current div once you click a new div that shows a new one

How to hide current div once you click a new div that shows a new one. the code below it will show and hide div, but what im trying to do once you click the first item and click another item both of them will show up how can i make it possible once you clock another item the first item that you click will hide 

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 (But its not closing once you click 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();
  });
});

Upvotes: 2

Views: 175

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

You don't have to write functions for every <a> tag...

  • First get all the <a> tag in an array using querySelectorAll

  • Then use javascript forEach to add a click event on every <a>

  • Use for loop to set display:none to all the divs

  • Then set the display:block to that div which has same id value as of data-id on <a> click

  • And to toggle the same div use a if condition and if that condition become true, exit the function using return

Stack Snippet

var anchor = document.querySelectorAll("a[data-id]");
var div = document.querySelectorAll(".Info-div");
anchor.forEach(function(elem) {
  elem.addEventListener('click', function() {
    var dataID = elem.getAttribute('data-id');
    var divID = document.getElementById(dataID);
    //to toggle the div
    if (divID.style.display === "block") {
      divID.style.display = "none";
      return;
    }
    //for all divs
    for (var i = 0; i < div.length; i++) {
      div[i].style.display = "none";
    }
    //for currentDiv
    divID.style.display = "block";
  })
})
.Info-div {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</ul>

<div class="col-md-8 Info-div" id="myDIV">
  <h3> SEND US YOUR RESUME ONE</h3>
</div>
<div class="col-md-8 Info-div" id="myDIVS">
  <h3> SEND US YOUR RESUME TWO </h3>
</div>
<div class="col-md-8 Info-div" id="myDIVSS">
  <h3> SEND US YOUR RESUME THREE </h3>
</div>

And if you are looking for the jQuery solution, you have to use toggle() to show/hide the same div and hide() to hide other divs

Stack Snippet

$(".career-list li a").on("click", function() {
  var clickedItemId = "#" + $(this).data("id");
  if (!$(clickedItemId).is(":visible")) {
    $(".Info-div").hide();
  }
  $(clickedItemId).toggle();
})
.Info-div {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
</ul>

<div class="col-md-8 Info-div" id="myDIV">
  <h3> SEND US YOUR RESUME ONE</h3>
</div>
<div class="col-md-8 Info-div" id="myDIVS">
  <h3> SEND US YOUR RESUME TWO </h3>
</div>
<div class="col-md-8 Info-div" id="myDIVSS">
  <h3> SEND US YOUR RESUME THREE </h3>
</div>

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can hide the another div in the else block:

document.getElementById("myDIV").style.display = 'none';
document.getElementById("myDIVS").style.display = 'none';
function myFunction() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIVS");
    if (x.style.display == "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
        y.style.display = "none";
    }
}

function myDIVS() {
     var x = document.getElementById("myDIVS");
     var y = document.getElementById("myDIV");
     if (x.style.display == "block") {
         x.style.display = "none";
     } else {
         x.style.display = "block";
         y.style.display = "none";
     }
 }
<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>

Upvotes: 1

Related Questions