Onclick 텍스트가 아래에있는 대신

Question

내 코드에 문제가 있습니다. onclick으로 표시되는 텍스트를 기본 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

단지 오프너는 당신이, 오프너의 div border 속성을 사용하여 다음과 같은 코드를 시도 할 수 있습니다 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; 
 
    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>