How to close multiple divs independed from each other. javascript

Question

I built a row of 4 buttons to open 4 divs, one at a time. The user can switch between the 4 divs by clicking these buttons. But, the user must be able to close this divs again, independed from each other. That means if the user clicks one of these buttons he must be able to close it again with one "closing-button" only. This button should be included to the row of 4. So there will be 4 buttons to open and switch between the divs like a gallery And one button to close whichever div is shown.

I would be very very happy if someone could help me, please!!!

window.show = function(elementId) { 
    var elements = document.getElementsByTagName("div");
    for (var i = 0; i < elements.length; i++)
        elements[i].className = "hidden";
    
    document.getElementById(elementId).className = "";
}

.hidden {
    display: none;
}
.designbutton {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-style: normal;
 color: #266786;
 background:none;
 background-image: none;
 text-align: center;
 vertical-align: middle;
 font-weight: bold;
 border-color:#266786;
 border-bottom:hidden;
 border-right:hidden;
}
#id1 {
 position:absolute;
 top:100px;
 left:30px;
 background-color:#33CC99;
 padding-left:90px;
 padding-right:90px;
 padding-top:30px;
 height:660px;
 width: 724px;
 color: #266786;
 line-height:1.65;
 text-align:center;
}
#id2 {
 height:auto;
 width:600px;
 text-align:center;
 font-size:14px;
 font-family: Arial, Helvetica, sans-serif;
 color: ##444444;
 position:absolute;
 left:30px;
 line-height:1.65;
 margin-top:50px;
}
#id3 {
 height:auto;
 width:600px;
 text-align:center;
 font-size:14px;
 font-family: Arial, Helvetica, sans-serif;
 color: ##444444;
 position:absolute;
 left:30px;
 line-height:1.65;
 margin-top:50px;
}
#id4 {
 height:auto;
 width:600px;
 text-align:center;
 font-size:14px;
 font-family: Arial, Helvetica, sans-serif;
 color: ##444444;
 position:absolute;
 left:30px;
 line-height:1.65;
 margin-top:50px;
}

<button class="designbutton" type="button" onclick="show('id1');">Economic Center</button>
<button class="designbutton" type="button" onclick="show('id2');">Logistic Center</button>
<button class="designbutton" type="button" onclick="show('id3');">Industrial Center</button>
<button class="designbutton" type="button" onclick="show('id4');">Financial Center</button>



<div id="id1" class="hidden">
<p><b>El idem sae.</b></p>
<p>Id et fugit officto dolupta spicide il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust, quisciisti culluptatur sedi testrum sectur?
Odipsunto venist occus issitae storepro iumqui volorat ionsedis nonem audi vellit faceaquiae. Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.</p></div>

<div id="id2" class="hidden">
<b>Ommolo occuptatur.</b><br><br>
Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.</div>

<div id="id3" class="hidden">
<b>Idunt perempor.</b><br><br>
Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.
</div>

<div id="id4" class="hidden">
<b>Optiaep erfero</b><br><br>
Id et fugit officto dolupta spicide il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust, quisciisti culluptatur sedi testrum sectur?
Odipsunto venist occus issitae storepro iumqui volorat ionsedis nonem audi vellit faceaquiae. Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.
</div>

Answer 1

You can add a class to the shown element

...
document.getElementById(elementId).className = "shown";
...

and on click of the close button, you may hide it again.

window.hide = function() { 
    var elements = document.getElementsByClassName("shown");
    elements[0].className = "hidden";
}

window.show = function(elementId) { 
    var elements = document.getElementsByClassName("shown");
    if (elements.length > 0)
        elements[0].className = "hidden";
    
    document.getElementById(elementId).className = "shown";
}

window.hide = function() { 
    var elements = document.getElementsByClassName("shown");
    if (elements.length > 0)
        elements[0].className = "hidden";
}

.hidden {
    display: none;
}
.designbutton {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-style: normal;
 color: #266786;
 background:none;
 background-image: none;
 text-align: center;
 vertical-align: middle;
 font-weight: bold;
 border-color:#266786;
 border-bottom:hidden;
 border-right:hidden;
}
#id1 {
 position:absolute;
 top:100px;
 left:30px;
 background-color:#33CC99;
 padding-left:90px;
 padding-right:90px;
 padding-top:30px;
 height:660px;
 width: 724px;
 color: #266786;
 line-height:1.65;
 text-align:center;
}
#id2 {
 height:auto;
 width:600px;
 text-align:center;
 font-size:14px;
 font-family: Arial, Helvetica, sans-serif;
 color: ##444444;
 position:absolute;
 left:30px;
 line-height:1.65;
 margin-top:50px;
}
#id3 {
 height:auto;
 width:600px;
 text-align:center;
 font-size:14px;
 font-family: Arial, Helvetica, sans-serif;
 color: ##444444;
 position:absolute;
 left:30px;
 line-height:1.65;
 margin-top:50px;
}
#id4 {
 height:auto;
 width:600px;
 text-align:center;
 font-size:14px;
 font-family: Arial, Helvetica, sans-serif;
 color: ##444444;
 position:absolute;
 left:30px;
 line-height:1.65;
 margin-top:50px;
}

<div>Some other div</div>

<button class="designbutton" type="button" onclick="show('id1');">Economic Center</button>
<button class="designbutton" type="button" onclick="show('id2');">Logistic Center</button>
<button class="designbutton" type="button" onclick="show('id3');">Industrial Center</button>
<button class="designbutton" type="button" onclick="show('id4');">Financial Center</button>
<button class="designbutton" type="button" onclick="hide();">Close</button>

<div id="id1" class="hidden">
  <p><b>El idem sae.</b></p>
  <p>Id et fugit officto dolupta spicide il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust, quisciisti culluptatur sedi testrum sectur?</p></div>

<div id="id2" class="hidden">
  <b>Ommolo occuptatur.</b><br><br>
  Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
  nempore odioriberro qui dellatq uiaspelit opta cum acest, etur?</div>

<div id="id3" class="hidden">
  <b>Idunt perempor.</b><br><br>
  Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
  fugitamet quias vella sit ducidus dolupta estior molore.
</div>

<div id="id4" class="hidden">
  <b>Optiaep erfero</b><br><br>
  Id et fugit officto dolupta spicide il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust, quisciisti culluptatur sedi testrum sectur?
</div>

I would highly recommend to have a look at jQuery as it makes life with JS much easier. Furthermore binding a method to window is a bit overpowered, as show is a very common word and may be overridden by other modules.

Answer 2

Using jquery, give all divs a common class, like divs

Then on button click,use following

$(".divs").hide();

Answer 3

Do the simplest thing.. add a common class to all your div you want to close and on close button click addClass hide to it. I have done it in a simple looking jsfiddle https://jsfiddle.net/f96cxs3r/

Html will be looking like

<div class="firstDiv">
 <div class="onebox gallery hide"></div>
 <div class="openBoxone"><button>Open</button></div>
</div>
<div class="secondDiv">
 <div class="twobox gallery hide"></div>
 <div class="openBoxtwo"><button>Open</button></div>
</div>
<div class="thirdDiv">
  <div class="threebox gallery hide"></div>
  <div class="openBoxthree"><button>Open</button></div>
</div>

<div class="closeButton">
   <div><button>Close</button></div>
</div>

Css will look like

.hide{display:none;}
.onebox{width:100px;height:100px;border:1px solid red;}
.twobox{width:100px;height:100px;border:1px solid green;}
.threebox{width:100px;height:100px;border:1px solid blue;}
.firstDiv,.secondDiv,.thirdDiv{display:inline-block;width:250px;} 
.closeButton{text-align:center;padding:20px;}

And js will be

$(".openBoxone button").on("click",function(){
   $(".onebox").removeClass("hide");
});
$(".openBoxtwo button").on("click",function(){
   $(".twobox").removeClass("hide");
});
$(".openBoxthree button").on("click",function(){
  $(".threebox").removeClass("hide");
});

$(".closeButton button").on("click",function(){
  $(".gallery").addClass("hide");
});