javascript - How can I hide one div before opening another? -

How can I create it so that only one div can be shown at a time? I tried to add "document.getElementById (currentID) .style.display = 'none';" In the second but it does not work.

  & lt; H5 onclick = "showImage ('chair')" & gt; Chair & lt; / H5> & Lt; H5 onclic = "show image ('table')" & gt; Table & lt; / H5> & Lt; H5 onclic = "show image ('long_table')" & gt; Meeting table & lt; / H5> & Lt; Div id = "chair" & gt; & Lt; Img src = "picture / 1.jpg" height = "300px" /> & Lt; H4 & gt; Product 1 & lt; / H4 & gt; & Lt; / Div & gt; & Lt; Div id = "table" & gt; & Lt; Img src = "picture / 2.jpg" height = "300px" /> & Lt; H4 & gt; Product 2 & lt; / H4 & gt; & Lt; / Div & gt; & Lt; Div id = "longtable" & gt; & Lt; Img src = "picture / 3.jpg" height = "300px" /> & Lt; H4 & gt; Product 3 & lt; / H4 & gt; & Lt; / Div & gt; & Lt; Script type = "text / javascript" & gt; Var currentID = ""; Function showImage (id) {if (currentID == ID) {document.getElementById (id) .style.display = 'none'; CurrentID = ""; } And {document.getElementById (id) .style.display = 'block'; CurrentID = ID; }} & Lt; / Script & gt;  

Better add a class to your HTML and then take the divs by their square. Then you can loop through the elements to hide them all, and then un-hide one you clicked on.

Example:

  var arrProducts = document.getElementsByClassName ('product'); (I = 0; i & lt; arrProducts.length; i + +) for {arrProducts [i] .style.display = 'none'; } Function showImage (id) {for (i = 0; i & lt; arrProducts.length; i ++) {if (id == arrProducts [i] .id) {if (document.getElementById (id) .style Display == = 'none') {arrProducts [i] .style.display = 'block'; } Other {arrProducts [i] .style.display = 'none'; }} And {arrProducts [i] .style.display = 'none'; }}}  

  h5 {cursor: indicator; } .product IMG {height: 10px; Width: 10px; }  

  & lt; H5 onclick = "showImage ('chair');" & Gt; Chair & lt; / H5> & Lt; H5 onclic = "show image ('table');" & Gt; Table & lt; / H5> & Lt; H5 onclic = "show image ('long_table');" & Gt; Meeting table & lt; / H5> & Lt; Div class = "product" id = "chair" & gt; & Lt; Img src = "picture / 1.jpg" height = "300px" /> & Lt; H4 & gt; Product 1 (Chair) & lt; / H4 & gt; & Lt; / Div & gt; & Lt; Div class = "product" id = "table" & gt; & Lt; Img src = "picture / 2.jpg" height = "300px" /> & Lt; H4 & gt; Product 2 (table) & lt; / H4 & gt; & Lt; / Div & gt; & Lt; Div class = "product" id = "tall_table" & gt; & Lt; Img src = "picture / 3.jpg" height = "300px" /> & Lt; H4 & gt; Product 3 (Meeting Table) & lt; / H4 & gt; & Lt; / Div & gt;