Display hidden div and closes others so 1 is displayed at a time

Question

I have a list of items I'm displaying with the html below. Each item has a hidden div with more details about the item. I have made it so if I click the onclick link it shows the div for that specific item. What I want to know is how I would make it hide the div I just opened if I use the onclick to display another items details? Also how could I make it toggle itself when the same onclick is clicked? My knowledge of javascript is somewhat limited so any help would be appreciated. Thanks!

HTML

<div>Item Name <a onclick="FullItemDetails(123)">Full Item Details</a></div>
<div>other stuff</div>
</div>
<div id="FullItemDetails_123" style="display: none;"></div>

And JAVASCRIPT

<script>
function FullItemDetails(item_id)  { 
document.getElementById("FullItemDetails_" + item_id).style.display = "block";
}
</script>

Each div with the extra info has a FullItemDetails_ ID followed by the items unique ID.

Does this answer your question? [Show/hide 'div' using JavaScript](https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) — norbitrial, Jan 03 '20 at 18:53

score 2 · Answer 1 · answered Jan 03 '20 at 18:58

2

You could find its current css display property to toggle visibility like this

function FullItemDetails(item_id)  { 
  var currentItem = document.getElementById("FullItemDetails_" + item_id);

  if (currentItem.style.display === "block") {
    currentItem.style.display = "none";
  } else {
    currentItem.style.display = "block";
  }
}

answered Jan 03 '20 at 18:58

Zhephard

360
1
13

Thanks @Born2DoubleUp feel free to mark it as a correct answer if it suits – Zhephard Jan 03 '20 at 20:36

score 1 · Answer 2 · answered Jan 03 '20 at 19:12

You can also do it with an event listener, se my example

var elements = document.getElementsByClassName('item')


for(var key in elements){
  
 elements[key].querySelector('.button').addEventListener('click', function(e){
    
  e.target.parentNode.querySelector('#description').style.display = 
    e.target.parentNode.querySelector('#description').style.display == 'none' ? 'block' : 'none'
   
  })
}

<div class="item">Item Name Full Item Details
  <div >Other stuff</div>
  <div id="description">Description</div>
  <button class="button">Toggle</button>
</div>

  <div class="item">Item Name Full Item Details
  <div >Other stuff</div>
  <div id="description">Description</div>
   <button class="button">Toggle</button>
</div>

  
  <div class="item">Item Name Full Item Details
  <div >Other stuff</div>
  <div id="description">Description</div>
 <button class="button">Toggle</button>
</div>

Display hidden div and closes others so 1 is displayed at a time

2 Answers2