Как закрыть несколько divs независимо друг от друга. javascript

Question

Я построил ряд из 4 кнопок, чтобы открыть 4 divs, по одному за раз. Пользователь может переключаться между 4-мя разделами, нажимая эти кнопки. Но пользователь должен иметь возможность закрыть эти divs снова, независимо друг от друга. Это означает, что если пользователь нажмет одну из этих кнопок, он должен будет снова закрыть ее с помощью одной только «закрывающей кнопки». Эта кнопка должна быть включена в строку 4. Таким образом, откроются 4 кнопки и переключаются между divs, как галерея И одна кнопка, чтобы закрыть любой div.

Я был бы очень рад, если бы кто-то мог мне помочь, пожалуйста!

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

Вы можете добавить класс к показанному элементу

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

и нажатием кнопки закрытия, вы можете скрыть его снова.

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

Я очень рекомендую посмотреть на jQuery как это делает жизнь JS гораздо проще. Кроме того, привязка метода к окну немного перегружена, так как show - очень распространенное слово и может быть переопределено другими модулями.

Answer 2

Использование JQuery, дают все divs общий класс, как divs

Затем по нажатию кнопки, используйте следующие

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

Answer 3

делать простейшую вещь .. добавить общий класс для всех ваших DIV вы хотите закрыть и закрыть кнопку click addClass, чтобы скрыть его. Я сделал это в простой глядя jsfiddle https://jsfiddle.net/f96cxs3r/

Html будет выглядеть как

<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 будет выглядеть

.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;} 

И JS будет

$(".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"); 
});