how can I toggle the visibility of 3 different divs to three corresponding divs

Question

I'm trying to toggle the visibility of these 3 divs by 3 separate corresponding images. I want the divs the be hidden at the start and only 1 to show at any time. Any help would be appreciated.

This is my html:

<div class="us">
        <img src="img/Kelly.svg" class="usiconK grow" onclick="toggleVisibility('name-togglek');">
        <img src="img/Callum.svg" class="usiconC grow" onclick="toggleVisibility('name-togglec');">
        <img src="img/Jong.svg" class="usiconJ grow" onclick="toggleVisibility('name-togglej');">
    </div>

    <div class="us2 name-togglek" style="display: none;">
        <h2 id="redspacing">
            kelly hill
        </h2>
    </div>

    <div class="us2 name-togglec" style="display: none;">
        <h2 id="redspacing">
            callum nowlan-dias
        </h2>
    </div>

    <div class="us2 name-togglej" style="display: none;">
        <h2 id="redspacing">
            jong seul bae
        </h2>
 </div>

This is my script:

<script> 
        var divs = ["name-togglek", "name-togglec", "name-togglej"];
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>

score 1 · Answer 1 · answered May 28 '15 at 21:10

You are using getElementById, but the html has those identifiers as classes, not as ids. Try changing to:

<div id="name-togglek" class="us2" style="display: none;">
    <h2 id="redspacing">
        kelly hill
    </h2>
</div>

and likewise for the other divs.

score 0 · Accepted Answer · answered May 28 '15 at 21:12

0

Those are not ids but classes. Use document.getElementsByClassName. Simplified your code:

 var divs = ["name-togglek", "name-togglec", "name-togglej"];
var visibleDivId = null;

function toggleVisibility(divId) {
    document.getElementsByClassName(divId)[0].style.display = "block";
    for(var i=0;i<divs.length;i++){
        if(divs[i] != divId){
          document.getElementsByClassName(divs[i])[0].style.display = "none";
        }
    }
}

Fiddle

answered May 28 '15 at 21:12

Zee

8,420
5
36
58

Thank you, I completely overlooked the class/id problem. Thank you for simplifying the code. I'm very new to using javascript. How would i go about re-hiding it when clicking upon the same corresponding div? – May 29 '15 at 12:41
@CallumN-D You can do a check for hide/show div. See this [updated fiddle](http://jsfiddle.net/wjauo349/1/) – Zee May 29 '15 at 12:45

Paul Coan · Answer 3 · 2015-05-28T21:54:49.047

TDDdev is correct below is some code I knocked up in about 2 mins so not tested but should be ok

Added a jsfiddle for you visit the below link

http://jsfiddle.net/yow677Lh/1/

Javascript:

function toggleVisibility(divId) {
for (var i = 0; i < divs.length; i++) {
    if (divs[i] === divId) {
        if ($(divs[i]).css("display") === "none") $(divs[i]).show();
    } else {
        if ($(divs[i]).css("display") !== "none") $(divs[i]).hide();
    }
}

}

score 0 · Answer 4 · answered May 28 '15 at 21:26

I like the idea of a jQuery solution, and this one seemed somewhat simple to me:

$('.us img').on('click', function(){
    $($('.us2').get($('.us img').index($(this)))).show().siblings('.us2').hide();
});

Here's a fiddle: http://jsfiddle.net/h9z5rkxx/

how can I toggle the visibility of 3 different divs to three corresponding divs

4 Answers4