Onclick-Ereignis: divs erscheinen nacheinander

Question

Ist es möglich, basierend auf dieser tatsächlichen ein div auf einmal zu machen, das heißt, die beiden Ereignisse onclick können nicht geöffnet werden, aber wenn das eine geöffnet ist und das andere Einer wird angeklickt, der erste automatisch geschlossen. Der Kontext, in dem dieser Code verwendet wird, erlaubt übrigens nicht die Verwendung von Jquery. Danke für Ihre Hilfe

<style type="text/css"> 
 
    .link{text-decoration:none; color:white;} 
 

 
    .link:visited{color:white} 
 

 
.row { 
 
    display: flex; /* equal height of the children */ 
 
} 
 

 
.col { 
 
    flex: 1; /* additionally, equal width */ 
 
    
 
    padding: 1em; 
 
    border: solid; 
 
} 
 

 
div {font-family:'Varela Round'; 
 
} 
 
    
 
    .opener { 
 
    background-color: #07183d; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    border: 1px white solid; 
 
} 
 

 
.benefits { 
 
    background-color: #07183d; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    width:300px; 
 
} 
 
</style> 
 
<style type="text/css">} 
 
a { 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
#upbutton { 
 
    border: 1px dotted white; 
 
} 
 
</style> 
 
<script>function show(id) { 
 
     if(document.getElementById('b'+id).style.display=='none') { 
 
      document.getElementById('b'+id).style.display='block'; 
 
     } 
 
     return false; 
 
    } 
 
    function hide(id) { 
 
     if(document.getElementById('b'+id).style.display=='block') { 
 
      document.getElementById('b'+id).style.display='none'; 
 
     } 
 
     return false; 
 
    } 
 
</script> 
 
<div class="row"> 
 
<div class="opener col"><a href="#1" name="1" onclick=" show('1');" class="link">SOCIETES: 400</a> 
 

 
<div class="benefits" id="b1" style="display:none;">Part SBF 120 : 120<br /> 
 
Part Filiales +100M€: 280 
 
<div id="upbutton"><a onclick=" hide('1');" >fermer</a></div> 
 
</div> 
 
</div> 
 

 
<div class="opener col"><a href="#1" name="1" onclick=" show('2');" class="link" >CONTACTS: 25 400</a> 
 

 
<div class="benefits col" id="b2" style="display:none;">Part CAC 40 : 15 700<br /> 
 
Part Filiales +100M€: 9 700<br /> 
 
% contacts IT: 21% 
 
<div id="upbutton"><a onclick=" hide('2');">fermer</a></div> 
 
</div> 
 
</div> 
 
<div class="opener col">EMAILS NOMINATIFS: 400</div> 
 

 
<div class="opener col">OPT OUT: 3%</div> 
 

 
    <div class="opener col">LIGNES DIRECTES: 35%</div></div>

Answer 1

Sie können eine Schleife durch die anderen Elemente und schließen Sie sie zunächst in den "Anzeigen"

function show(id) { 

    var benefits = document.getElementsByClassName("benefits"); 
    for(var i = 0; i<benefits.length; i++){ 
     benefits[i].style.display="none"; 
    } 

    if(document.getElementById('b'+id).style.display=='none') { 
     document.getElementById('b'+id).style.display='block'; 
    } 

    return false; 
} 

Answer 2

function show(id) { 
var v = parseInt(id); 
var list = document.getElementsByClassName("benefits"); 
//var num = list.length; 

if(document.getElementById('b'+id).style.display=='none')  { 
    document.getElementById('b'+id).style.display='block'; 
} 

for (i = v+1; i <= list.length ; i++) { 
if(document.getElementById('b'+i).style.display=='block')  { 
    document.getElementById('b'+i).style.display='none'; 
} 
} 
for (i = v-1; i >=0 ; i--) { 
if(document.getElementById('b'+i).style.display=='block')  { 
    document.getElementById('b'+i).style.display='none'; 
} 
} 


return false; 
}