Onclickのテキストがdivの隣に表示されるのではなく、

Question

私のコードに問題があります.clickに表示されるテキストをメインのdivの下に表示したいのではなく、その横に表示します。誰かが私が作った間違いや、これを修正するために私のコードに追加できることの手がかりを持つことができますか？私は青い背景を置くので、私は私のdivの間にスペースを追加することができますが、私は1つのブロックのようになりたくない別の質問があります。ただオープナーは、次のコードを試してみてください、あなたはオープナーのdivの境界線プロパティを使用することができますdiv要素の間にスペースを追加するために、その下に表示されますDIV側に隠されたdivを追加

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

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

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

 
<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 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

ありがとう：

<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>