Show a hidden div while making another hidden

Question

I am looking for a way to toggle through three stacked div's where a button press will trigger an onclick function to make that specific div visible and hiding the others. I have included a jsfiddle below with the code I currently have any help on this would be amazing!

  function togglediv(id1, id2, id3) { var idOne = document.getElementById(id1); var idTwo = document.getElementById(id2); var idThree = document.getElementById(id3); idOne.style.display = idOne.style.display == "block" ? "none" : "block"; idTwo.style.display = idTwo.style.display == "none"; idThree.style.display = idThree.style.display == "none"; } 

  <div class="table-responsive"> <button type="button" class="btn btn-primary" onclick="togglediv('inner-dung', 'inner-boss', 'inner-item')"> Dungeon </button> <button type="button" class="btn btn-primary" onclick="togglediv('inner-boss', 'inner-dung', 'inner-item')"> Boss </button> <button type="button" class="btn btn-primary" onclick="togglediv('inner-item', 'inner-dung', 'inner-boss')"> Item </button> </div> <div id="search-dung"> <div id="inner-dung"> DUNGEON </div> <div id="inner-boss"> BOSS </div> <div id="inner-item"> ITEM </div> </div> 

JSFiddle

Answer 1

You can pass the ID you want to show to the function, use a CSS class to toggle display: none/block , toggle that class on the element you click on and hide the rest by removing the class.

 .table-responsive { margin: 0px auto; width: 90%; } #search-dung { margin: 0px auto; width: 90%; height: 50%; background-color: white; border: 1px solid red; } #inner-dung, #inner-item, #inner-boss { position: absolute; margin: 0px auto; width: 90%; height: 50%; background-color: white; border: 1px solid red; display: none; } #inner-dung.show, #inner-item.show, #inner-boss.show { display: block; } 

 <div class="table-responsive"> <button type="button" onclick="togglediv('inner-dung')"> Dungeon </button> <button type="button" onclick="togglediv('inner-boss')"> Boss </button> <button type="button" onclick="togglediv('inner-item')"> Item </button> </div> <div id="search-dung"> <div id="inner-dung"> DUNGEON </div> <div id="inner-boss"> BOSS </div> <div id="inner-item"> ITEM </div> </div> <script> var els = document.getElementById('search-dung').getElementsByTagName('div'); function togglediv(id) { var el = document.getElementById(id); for (var i = 0; i < els.length; i++) { var cur = els[i]; if (cur.id == id) { cur.classList.toggle('show') } else { cur.classList.remove('show'); } } } </script> 

Answer 2

function togglediv(id1, id2, id3) {
    var idOne = document.getElementById(id1);
    var idTwo = document.getElementById(id2);
    var idThree = document.getElementById(id3);
    idOne.style.display = "block";
    idTwo.style.display = "none";
    idThree.style.display = "none";
}

https://codepen.io/anon/pen/NjOpJw

Answer 3

"Teach your children well"

Apply a rule to the parent to influence the children.

 document.querySelector( "form" ).addEventListener( "click", function( evt ) { var n = evt.target.name; if ( n ) { document.querySelector( "#foobarbaz" ).setAttribute( "class", n ); } }, false ); 

 #foo, #bar, #baz { display: none; } #foobarbaz.foo #foo, #foobarbaz.bar #bar, #foobarbaz.baz #baz { display: block; } 

 <div id="foobarbaz" class="foo"> <div id="foo">Foo!</div> <div id="bar">Bar?</div> <div id="baz">Baz.</div> </div> <form> <input type="button" value="Foo" name="foo"> <input type="button" value="Bar" name="bar"> <input type="button" value="Baz" name="baz"> </form> 

Answer 4

a couple of of problems there.

1. use onClick rather than onclick

2. idOne.style.display = idOne.style.display == "block" ? "none" : "block"; will return a boolean so you should change it for this

    idOne.style.display = "block"; 

3. set your javascript to load in the body.

here's a working version

https://jsfiddle.net/83qwrk70/1/

Answer 5

You can use a switch case, passing only the element you want to show in toggle div

//index.html
<button type="button" class="btn btn-primary" onclick="togglediv('inner-dung')">
          Dungeon
</button>
<button type="button" class="btn btn-primary" onclick="togglediv('inner-boss')">
          Boss</button>   
<button type="button" class="btn btn-primary" onclick="togglediv('inner-item')">
          Item </button>  

//index.js
function show(el) {
    el.style.display = 'block';
}

function hide(el) {
    el.style.display = 'none';
}

function togglediv(selected) {
    var idOne = document.getElementById('inner-dung');
    var idTwo = document.getElementById('inner-boss');
    var idThree = document.getElementById('inner-item');
    switch(selected) {
        case 'inner-dung': {
            show(idOne);
            hide(idTwo);
            hide(idThree);
            break;
        }
        case 'inner-boss': {
            hide(idOne);
            show(idTwo);
            hide(idThree);
            break;
        }
        case 'inner-item': {
            hide(idOne);
            hide(idTwo);
            show(idThree);
            break;
        }
    }

}

Answer 6

Here is another option that is scaleable:

var active = "inner-dung",
    inactive = ["inner-boss", "inner-item"];

var toggleDiv = function (id) {
    active = inactive.splice(inactive.indexOf(id), 1, active);
    document.getElementById(active).style.display = "block"; // or use style sheet
    for (var i = 0; i < inactive.length; i++) {
        document.getElementById(inactive[i]).style.display  = "none"; // or use style sheet
    }
}

If there is no default active item, you can put "inner-dung" in the array as well. If you do that, the "inactive" array will receive "undefined" the first time, but it will not get in the way of the purpose.

You don't have to use a for-loop of course, but if you have more items you would.