Show en hide meerdere divs

Door G Jansma op 08-09-2017 13:09

3.634 views

Ik wil op mijn website meerdere menu'tjes maken, waardoor de inhoud van de div wijzigt. De div wordt getoond door middel van CSS display block en none. Zoals in het onderstaand voorbeeld, maar dan meerdere op dezelfde pagina. Ik weet alleen niet hoe ik dat kan wijzigen in de javascript, daarvoor is mijn kennis daarvan te beperkt. Nu lukt dat namelijk niet. Iemand die me daarmee kan helpen?

http://blogs.html5andcss3.org/show-and-hide-multiple-div-using-javascript/

De code daarvan:



<!DOCTYPE html>
<html>
<head>
<title>Show and hide multiple DIV using JavaScript</title>
<style>
.main_div{text-align:center; background: #00C492; padding:20px; width: 400px;}
.inner_div{background: #fff; margin-top:20px; height: 100px;}
.buttons a{font-size: 16px;}
.buttons a:hover{cursor:pointer; font-size: 16px;}
</style>
<script>
    var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }
</script>
</head>
<body>
<div class="main_div">
<div class="buttons">
<a href="#" onclick="toggleVisibility('Menu1');">Menu1</a> | <a href="#" onclick="toggleVisibility('Menu2');">Menu2</a> | <a href="#" onclick="toggleVisibility('Menu3');">Menu3</a> | <a href="#" onclick="toggleVisibility('Menu4');">Menu4</a>
</div>
<div class="inner_div">
<div id="Menu1">I'm container one</div>
<div id="Menu2" style="display: none;">I'm container two</div>
<div id="Menu3" style="display: none;">I'm container three</div>
<div id="Menu4" style="display: none;">I'm container four</div>
</div>
</div>
</body>
</html>

$( document ).ready(function() { $(".menu a").click(function(event) { // voorkom het uitvoeren van de snelkoppeling event.preventDefault(); var tab = $(this).attr('href'); var container = $(tab).closest('.tab-container'); var menu = $(this).closest('.menu'); /* hide divs and show one div */ container.children('div').hide(); $(tab).show(); /* remove class active and add class to current menuitem */ menu.find('a').removeClass('active'); $(this).addClass('active'); }); });