I have several DIV that open with a specific button to each. When I click on one of them, the specific DIV appears. I'm looking to close the open DIV when I click on another button. How can I do that?
for the moment when I click on the first button the DIV appears and when I click on the second button the first DIV stay displayed and the second DIV appear below.
You can see the website here : www.coramp.eu to see what happen.
I'm using slideToggle to show the DIVs.
$(document).ready(function(){
$("#eds").click(function(){
$("#edsContenu").slideToggle(500);
});
});
$(document).ready(function(){
$("#bridge").click(function(){
$("#bridgeContenu").slideToggle(500);
});
});
$(document).ready(function(){
$("#stress").click(function(){
$("#stressContenu").slideToggle(500);
});
});
$(document).ready(function(){
$("#sante").click(function(){
$("#santeContenu").slideToggle(500);
});
});
$(document).ready(function(){
$("#cosmeto").click(function(){
$("#cosmetoContenu").slideToggle(500);
});
});
$(document).ready(function(){
$("#polymere").click(function(){
$("#polymereContenu").slideToggle(500);
});
});
$(document).ready(function(){
$("#vegetal").click(function(){
$("#vegetalContenu").slideToggle(500);
});
});.vignettesContenus {
padding: 5px;
text-align: center;
background-color: #00011f;
display: none;
}
#contenus{
background-color: #e8f1fa;
color : black;
font-size: 28px;
text-align: justify;
} <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<section id="vignettes">
<div id="discovered" >
<div id="file" class ="container">
<input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px"/>
</div>
<div id="file" class ="container">
<input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px"/>
</div>
</div>
<div id = "research">
<div id="file" class ="container">
<input id="stress" type="image" src="IMAGES/PNG/eau.png" alt="eau photonique" height="250px" width="250px" />
</div>
<div id="file" class ="container">
<input id="sante" type="image" src="IMAGES/PNG/syst_biologique.png" alt="Photonic Biological system" height="250px" width="250px"/>
</div>
<div id="file" class ="container">
<input id="cosmeto" type="image" src="IMAGES/PNG/principes_actifs.png" alt="Principe actif" height="250px" width="250px"/>
</div>
<div id="file" class ="container">
<input id="vegetal" type="image" src="IMAGES/PNG/vegetal.png" alt="étude photonique des végétaux" height="250px" width="250px" />
</div>
<div id="file" class ="container">
<input id="polymere" type="image" src="IMAGES/PNG/polymere.png" alt="étude photonique des polymères" height="250px" width="250px"/>
</div>
</div>
</section>
<section id="contenus">
<div id="edsContenu" class="vignettesContenus">
<section id="content">
<div id="text">
<p>EDS©, pour Electrophotonic DataPhoton System » est un dispositif unique permettant d’acquérir, dans le spectre UV, les luminescences d’un corps soumis à son action. Ces luminescences sont caractéristiques de l’objet étudié. <br><br> Le schéma ci-dessous montre le processus de capture d'images utilisé par notre dispositif patenté EDS.</p>
</div>
</section>
</div>
<div id="bridgeContenu" class="vignettesContenus">
<section id="content">
<div id="text">
<p>Les ponts photoniques constituent une découverte importante sur laquelle une communication a été présentée, en 2014, à l’occasion d’une rencontre internationale organisée par la Bioelectromagnetic Society en Afrique du Sud.<br><br>
Des ponts photoniques peuvent apparaître ou non, dans le spectre UV, lorsque deux produits ou un système biologique et un produit sont placés à proximité l’un de l’autre sur une électrode spécifique appelée « support de conteneurs » et qu’un champ électromagnétique important est généré. </p>
</div>
</section>
</div>
<div id="stressContenu" class="vignettesContenus">
<section id="content">
<div id="text">
<p>Tous les liquides, y compris les huiles et huiles essentielles, peuvent faire l’objet d’investigation photonique avec le dispositif EDS©. Outre leurs valeurs énergétiques (au sens électron / photon), un rapport de synthèse détaillé peut être réalisé comprenant un ensemble d’indicateurs tels que celui d’une validation intra-lot par exemple.</p><br><br>
Voici quelques exemples de captation réalisés à partir de différents types de liquide :<br><br>
<h3> Survolez les vignettes pour obtenir les légendes</h3>
</div>
</section>
</div>
<div id="santeContenu" class="vignettesContenus">
<section id="content">
<div id="text">
<p> Avec le dispositif EDS©, il est possible de visualiser les luminescences émergeant de l’extrémité des doigts d’une personne. Une fois enregistrées, ces luminescences peuvent être quantifiées sectoriellement et corrélées avec un état d’être du moment.</p>
<h3> Survolez les vignettes pour obtenir les légendes</h3>
</div>
</section>
</div>
<div id="cosmetoContenu" class="vignettesContenus">
<section id="content">
<div id="text">
<p>Les effets de couronne obtenus avec le dispositif EDS© montrent des géométrisations, des valeurs énergétiques (au sens électron / photon) et d’autres caractéristiques propres à chaque produit. Tous ces éléments sont des paramètres importants qui peuvent être utilisés dans le cadre de l’optimisation d’un produit (par exemples : tester différents excipients ou conditionnements, vérifier le comportement dans le temps, etc...)</p>
</div>
</section>
</div>
<div id="polymereContenu" class="vignettesContenus">
<section id="content">
<div id="text">
<p>Avec le dispositif EDS©, la matière inerte peut être observée sous un œil nouveau en mettant en évidence des éléments difficilement accessibles autrement.
A titre d’exemple, voici deux échantillons d’un même polymère (l’un primérisé, l’autre non) avec des différences photoniques suffisamment significatives pour les caractériser, là où aucun marqueur physico- chimique n’est à même de le faire.</p>
</div>
</section>
</div>
<br>
<div id="vegetalContenu" class="vignettesContenus">
<section id="content">
<div id="text">
<p>Les végétaux et tout ce qui concerne la biodiversité en général se prêtent aux investigations menées avec le dispositif EDS©.
Comme le montrent les images ci-dessous, plusieurs types de travaux peuvent être menés pour définir, par exemple, la signature photonique d’une espèce ou encore son niveau de vitalité.</p>
</div>
</section>
</div>
</section>You're almost there...
$(document).ready(function(){
$("#bridge").click(function(){
/// this checks if a DIV is open
/// when true it closes the DIV
if(window.openDIV){
window.openDIV.slideToggle(500);
};
/// opening new DIV
$("#bridgeContenu").slideToggle(500);
/// This sets the new opened DIV
window.openDIV = $("#bridgeContenu");
});
});
Just do that on every DIV in your code and it should work like a charm