アコーディオンリストの高さ

Question

作成したアコーディオンリストのコードは以下のとおりです。私はすべての見出しボックスの高さを同じに設定したと思ったが、Aの高さは残りのものよりも大きかった。私は何を間違えたのですか？何でも助けてくれる、歓声。

(function() { 
 
    var accordions, i; 
 
    
 
    // Make sure the browser supports what we are about to do. 
 
    if (!document.querySelectorAll || !document.body.classList) return; 
 
    
 
    // Using a function helps isolate each accordion from the others 
 
    function makeAccordion(accordion) { 
 
    var targets, currentTarget, i; 
 
    targets = accordion.querySelectorAll('.accordion > * >h1 '); 
 
    for(i = 0; i < targets.length; i++) { 
 
     targets[i].addEventListener('click', function (e) { 
 
     /*Added the code below*/ 
 
     if (e.target.parentNode.classList.contains("expanded")) { 
 
      e.target.parentNode.classList.remove("expanded") 
 
     } else { 
 
     /*Else do the following, same as before */ 
 
     if (currentTarget) 
 
      currentTarget.classList.remove('expanded'); 
 
     
 
     currentTarget = this.parentNode; 
 
     currentTarget.classList.add('expanded'); 
 
     } 
 
     }, false); 
 
    } 
 

 
    accordion.classList.add('js'); 
 
    } 
 

 
    // Find all the accordions to enable 
 
    accordions = document.querySelectorAll('.accordion'); 
 
    console.log(accordions); 
 
    
 
    // Array functions don't apply well to NodeLists 
 
    for(i = 0; i < accordions.length; i++) { 
 
    makeAccordion(accordions[i]); 
 
    } 
 
    
 
})();

<style> 
 
/* Body style */ 
 
body { 
 
    padding: 2%; 
 
} 
 
/*All paragraphs*/ 
 
.p{ 
 
padding:5px; 
 
color:#007a5e 
 
} 
 
/*Accordion Movement*/ 
 
.accordion.js > * { 
 
    overflow: hidden; 
 
} 
 

 
.accordion.js > *:not(.expanded) > *:not(h1) { 
 
    max-height: 0; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 

 
.accordion.js > .expanded > *:not(h1) { 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 

 
.accordion.js > * > h1 { 
 
    cursor: pointer; 
 
    visibility: visible; 
 
} 
 

 
.accordion.js > * > *:not(h1) { 
 
    transition: max-height 0.5s, 
 
    visibility 0.5s, 
 
    margin 0.5s, 
 
    opacity 0.5s; 
 
} 
 
/*Section Properties*/ 
 
.sections { 
 
font-family:Verdana; 
 
font-weight:lighter; 
 
color:#5E5E5E; 
 
text-align:center; 
 
border-style:solid; 
 
border-width:1px; 
 
border-color:#E3E3E3; 
 
padding: 5px; 
 
background-color:#FCFCFC; 
 
border-radius:1px; 
 
} 
 

 
.sections:hover { 
 
    box-shadow: 0 0 5px rgba(0,0,0,0.1); 
 
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
-o-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    } 
 
/*Green Section Properties*/ 
 
    .sections2 { 
 
font-family:Verdana; 
 
font-weight:lighter; 
 
color:#FFFFFF; 
 
text-align:center; 
 
border-style:solid; 
 
border-width:1px; 
 
border-color:#E3E3E3; 
 
padding: 5px; 
 
background-color:#007a5e; 
 
border-radius:1px; 
 
} 
 

 
.sections2:hover { 
 
    box-shadow: 0 0 5px rgba(0,0,0,0.1); 
 
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
-o-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
    } 
 
/*Link Box Properties*/ 
 
    .linkboxes:link, .linkboxes:visited { 
 
    border-color:#007a5e; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    background-color:#FCFCFC; 
 
    color:#5E5E5E; 
 
    padding: 12.5px 12.5px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 
.linkboxes:hover, .linkboxes:active { 
 
border-color:#007a5e; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    background-color: #FCFCFC; 
 
    box-shadow: 0 0 5px rgba(0,0,0,0.1); 
 
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
-o-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
} 
 
/*Green Link Box Properties*/ 
 
    .linkboxes2:link, .linkboxes2:visited { 
 
    border-color:#FFFFFF; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    background-color:#007a5e; 
 
    color:#FFFFFF; 
 
    padding: 12.5px 12.5px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 
.linkboxes2:hover, .linkboxes2:active { 
 
border-color:#e0e0e0; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    background-color:#007a5e; 
 
    box-shadow: 0 0 5px rgba(0,0,0,0.1); 
 
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
-o-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
 
} 
 
/*Read More Box 1*/ 
 
    .read-more-state { 
 
    display: none; 
 
} 
 

 
.read-more-target { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .25s ease; 
 
} 
 

 
.read-more-state:checked ~ .read-more-wrap .read-more-target { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 

 
.read-more-state ~ .read-more-trigger:before { 
 
    content: 'February Activities'; 
 
    font-weight:bold; 
 
    color:#007a5e 
 
} 
 

 
.read-more-state:checked ~ .read-more-trigger:before { 
 
    content: 'February Activities'; 
 
} 
 

 
.read-more-trigger { 
 
    cursor: pointer; 
 

 
} 
 
/*Read More Box 2*/ 
 
    .read-more-state2 { 
 
    display: none; 
 
} 
 

 
.read-more-target2 { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .25s ease; 
 
} 
 

 
.read-more-state2:checked ~ .read-more-wrap2 .read-more-target2 { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 

 
.read-more-state2 ~ .read-more-trigger2:before { 
 
    content: 'March Activities'; 
 
    font-weight:bold; 
 
    color:#007a5e 
 
} 
 

 
.read-more-state2:checked ~ .read-more-trigger2:before { 
 
    content: 'March Activities'; 
 
} 
 

 
.read-more-trigger2 { 
 
    cursor: pointer; 
 

 
} 
 
/*Read More Box 3*/ 
 
    .read-more-state3 { 
 
    display: none; 
 
} 
 

 
.read-more-target3 { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .25s ease; 
 
} 
 

 
.read-more-state3:checked ~ .read-more-wrap3 .read-more-target3 { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 

 
.read-more-state3 ~ .read-more-trigger3:before { 
 
    content: 'April Activities'; 
 
    font-weight:bold; 
 
    color:#007a5e 
 
} 
 

 
.read-more-state3:checked ~ .read-more-trigger3:before { 
 
    content: 'April Activities'; 
 
} 
 

 
.read-more-trigger3 { 
 
    cursor: pointer; 
 

 
} 
 
/*Read More Box 4*/ 
 
    .read-more-state4 { 
 
    display: none; 
 
} 
 

 
.read-more-target4 { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .25s ease; 
 
} 
 

 
.read-more-state4:checked ~ .read-more-wrap4 .read-more-target4 { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 

 
.read-more-state4 ~ .read-more-trigger4:before { 
 
    content: 'May Activities'; 
 
    font-weight:bold; 
 
    color:#007a5e 
 
} 
 

 
.read-more-state4:checked ~ .read-more-trigger4:before { 
 
    content: 'May Activities'; 
 
} 
 

 
.read-more-trigger4 { 
 
    cursor: pointer; 
 

 
} 
 
    </style>

<section class="accordion js"> 
 
    <section class="sections"> 
 
     <h1>A</h1>  
 
<div> 
 
    <input type="checkbox" class="read-more-state" id="post-1" /> 
 
    <label for="post-1" class="read-more-trigger"></label> 
 
    <div class="read-more-wrap"> 
 
    <div class="read-more-target"><p class="p">Feb</p> 
 
    </div> 
 
</div> 
 
</div> 
 
<br style="line-height: 15px;"/> 
 
<div> 
 
    <input type="checkbox" class="read-more-state2" id="post-2" /> 
 
    <label for="post-2" class="read-more-trigger2"></label> 
 
    <div class="read-more-wrap2"> 
 
    <div class="read-more-target2"> 
 
    <p class="p">Mar<p/> 
 
    <p class="p">Mar<p/> 
 
    <p class="p">Mar<p/> 
 
    </div> 
 
</div> 
 
</div> 
 
<br style="line-height: 15px;"/> 
 
<div> 
 
    <input type="checkbox" class="read-more-state3" id="post-3" /> 
 
    <label for="post-3" class="read-more-trigger3"></label> 
 
    <div class="read-more-wrap3"> 
 
    <div class="read-more-target3"> 
 
    <p class="p">Apr<p/> 
 
    <p class="p">Apr<p/> 
 
    <p class="p">Apr<p/> 
 
    </div> 
 
</div> 
 
</div> 
 
<br style="line-height: 15px;"/> 
 
<div> 
 
    <input type="checkbox" class="read-more-state4" id="post-4" /> 
 
    <label for="post-4" class="read-more-trigger4"></label> 
 
    <div class="read-more-wrap4"> 
 
    <div class="read-more-target4"><p class="p">May<p/> 
 
    <p class="p">May<p/> 
 
    <p class="p">May</p> 
 
    </div> 
 
</div> 
 
</div> 
 
</section> 
 

 

 
    <br style="line-height: 15px;"/> 
 
    <section class="sections2"> 
 
     <h1> 
 
     <span class="ms-rteThemeForeColor-1-0">B</span></h1> 
 
     <p>All content for B.</p> 
 
     <p> 
 
     <a href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
 
      <span class="ms-rteThemeForeColor-1-0">This is a link</span></a></p> 
 
     <p> 
 
     <a class="linkboxes2" href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
 
      <span class="ms-rteThemeForeColor-1-0">This is also a link</span></a></p> 
 
     <p>More content.</p> 
 
     <p> 
 
     <a class="linkboxes2" href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
 
      <span class="ms-rteThemeForeColor-1-0">More Links :)</span></a></p> </section> 
 
    <br style="line-height: 15px;"/> 
 
    <section class="sections"> 
 
     <h1>C</h1> 
 
     <p class="p">All content for C.</p> 
 
     <p> 
 
     <a href="/departments/humanresources/test/Pages/default.asp" target="_blank">This is a link</a></p> 
 
     <p> 
 
     <a class="linkboxes" href="/departments/humanresources/test/Pages/default.asp" target="_blank">This is also a link</a></p> 
 
     <p class="p">More content.</p> 
 
     <p> 
 
     <a class="linkboxes" href="/departments/humanresources/test/Pages/default.asp" target="_blank">More Links :)</a></p> </section> 
 
</section>

Answer 1

あなたはdiv年代の間に、そのセクションの<br style="line-height: 15px;"/>の要素を持っています。それを削除し、の代わりにmargin-bottom: 15pxを使用してください。

次に、padding: 5pxの.pにあるpadding: 5pxのようなその他の問題が、marginに変更されました。

そして、あなたは彼らにわずかな高さを与え、視覚的に隠された要素の一部からのオーバーフローを持っているが、そう、visiblity: hiddenを使用しているあなたのアコーディオン内.accordion.js > *:not(.expanded) > *:not(h1)

(function() { 
 
    var accordions, i; 
 
    
 
    // Make sure the browser supports what we are about to do. 
 
    if (!document.querySelectorAll || !document.body.classList) return; 
 
    
 
    // Using a function helps isolate each accordion from the others 
 
    function makeAccordion(accordion) { 
 
    var targets, currentTarget, i; 
 
    targets = accordion.querySelectorAll('.accordion > * >h1 '); 
 
    for(i = 0; i < targets.length; i++) { 
 
     targets[i].addEventListener('click', function (e) { 
 
     /*Added the code below*/ 
 
     if (e.target.parentNode.classList.contains("expanded")) { 
 
      e.target.parentNode.classList.remove("expanded") 
 
     } else { 
 
     /*Else do the following, same as before */ 
 
     if (currentTarget) 
 
      currentTarget.classList.remove('expanded'); 
 
     
 
     currentTarget = this.parentNode; 
 
     currentTarget.classList.add('expanded'); 
 
     } 
 
     }, false); 
 
    } 
 

 
    accordion.classList.add('js'); 
 
    } 
 

 
    // Find all the accordions to enable 
 
    accordions = document.querySelectorAll('.accordion'); 
 
    console.log(accordions); 
 
    
 
    // Array functions don't apply well to NodeLists 
 
    for(i = 0; i < accordions.length; i++) { 
 
    makeAccordion(accordions[i]); 
 
    } 
 
    
 
})();

/* Body style */ 
 

 
body { 
 
    padding: 2%; 
 
} 
 

 

 
/*All paragraphs*/ 
 

 
.p { 
 
    margin: 5px; 
 
    color: #007a5e; 
 
} 
 

 

 
/*Accordion Movement*/ 
 

 
.accordion.js > * { 
 
    overflow: hidden; 
 
} 
 

 
.accordion.js > *:not(.expanded) > *:not(h1) { 
 
    max-height: 0; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    overflow: hidden; 
 
} 
 

 
.accordion.js > .expanded > *:not(h1) { 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 

 
.accordion.js > * > h1 { 
 
    cursor: pointer; 
 
    visibility: visible; 
 
} 
 

 
.accordion.js > * > *:not(h1) { 
 
    transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s; 
 
} 
 

 

 
/*Section Properties*/ 
 

 
.sections { 
 
    font-family: Verdana; 
 
    font-weight: lighter; 
 
    color: #5E5E5E; 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #E3E3E3; 
 
    padding: 5px; 
 
    background-color: #FCFCFC; 
 
    border-radius: 1px; 
 
} 
 

 
.sections:hover { 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 

 

 
/*Green Section Properties*/ 
 

 
.sections2 { 
 
    font-family: Verdana; 
 
    font-weight: lighter; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #E3E3E3; 
 
    padding: 5px; 
 
    background-color: #007a5e; 
 
    border-radius: 1px; 
 
} 
 

 
.sections2:hover { 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 

 

 
/*Link Box Properties*/ 
 

 
.linkboxes:link, 
 
.linkboxes:visited { 
 
    border-color: #007a5e; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: #FCFCFC; 
 
    color: #5E5E5E; 
 
    padding: 12.5px 12.5px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 
.linkboxes:hover, 
 
.linkboxes:active { 
 
    border-color: #007a5e; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: #FCFCFC; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 

 

 
/*Green Link Box Properties*/ 
 

 
.linkboxes2:link, 
 
.linkboxes2:visited { 
 
    border-color: #FFFFFF; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: #007a5e; 
 
    color: #FFFFFF; 
 
    padding: 12.5px 12.5px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 
.linkboxes2:hover, 
 
.linkboxes2:active { 
 
    border-color: #e0e0e0; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: #007a5e; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
 
} 
 

 

 
/*Read More Box 1*/ 
 

 
.read-more-state { 
 
    display: none; 
 
} 
 

 
.read-more-target { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .25s ease; 
 
} 
 

 
.read-more-state:checked ~ .read-more-wrap .read-more-target { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 

 
.read-more-state ~ .read-more-trigger:before { 
 
    content: 'February Activities'; 
 
    font-weight: bold; 
 
    color: #007a5e 
 
} 
 

 
.read-more-state:checked ~ .read-more-trigger:before { 
 
    content: 'February Activities'; 
 
} 
 

 
.read-more-trigger { 
 
    cursor: pointer; 
 
} 
 

 

 
/*Read More Box 2*/ 
 

 
.read-more-state2 { 
 
    display: none; 
 
} 
 

 
.read-more-target2 { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .25s ease; 
 
} 
 

 
.read-more-state2:checked ~ .read-more-wrap2 .read-more-target2 { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 

 
.read-more-state2 ~ .read-more-trigger2:before { 
 
    content: 'March Activities'; 
 
    font-weight: bold; 
 
    color: #007a5e 
 
} 
 

 
.read-more-state2:checked ~ .read-more-trigger2:before { 
 
    content: 'March Activities'; 
 
} 
 

 
.read-more-trigger2 { 
 
    cursor: pointer; 
 
} 
 

 

 
/*Read More Box 3*/ 
 

 
.read-more-state3 { 
 
    display: none; 
 
} 
 

 
.read-more-target3 { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .25s ease; 
 
} 
 

 
.read-more-state3:checked ~ .read-more-wrap3 .read-more-target3 { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 

 
.read-more-state3 ~ .read-more-trigger3:before { 
 
    content: 'April Activities'; 
 
    font-weight: bold; 
 
    color: #007a5e 
 
} 
 

 
.read-more-state3:checked ~ .read-more-trigger3:before { 
 
    content: 'April Activities'; 
 
} 
 

 
.read-more-trigger3 { 
 
    cursor: pointer; 
 
} 
 

 

 
/*Read More Box 4*/ 
 

 
.read-more-state4 { 
 
    display: none; 
 
} 
 

 
.read-more-target4 { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .25s ease; 
 
} 
 

 
.read-more-state4:checked ~ .read-more-wrap4 .read-more-target4 { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 

 
.read-more-state4 ~ .read-more-trigger4:before { 
 
    content: 'May Activities'; 
 
    font-weight: bold; 
 
    color: #007a5e 
 
} 
 

 
.read-more-state4:checked ~ .read-more-trigger4:before { 
 
    content: 'May Activities'; 
 
} 
 

 
.read-more-trigger4 { 
 
    cursor: pointer; 
 
} 
 

 
.accordion > section > div { 
 
    margin-bottom: 15px; 
 
}

<section class="accordion js"> 
 
    <section class="sections"> 
 
    <h1>A</h1> 
 
    <div> 
 
     <input type="checkbox" class="read-more-state" id="post-1" /> 
 
     <label for="post-1" class="read-more-trigger"></label> 
 
     <div class="read-more-wrap"> 
 
     <div class="read-more-target"> 
 
      <p class="p">Feb</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <input type="checkbox" class="read-more-state2" id="post-2" /> 
 
     <label for="post-2" class="read-more-trigger2"></label> 
 
     <div class="read-more-wrap2"> 
 
     <div class="read-more-target2"> 
 
      <p class="p">Mar 
 
      <p/> 
 
      <p class="p">Mar 
 
       <p/> 
 
       <p class="p">Mar 
 
       <p/> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <input type="checkbox" class="read-more-state3" id="post-3" /> 
 
     <label for="post-3" class="read-more-trigger3"></label> 
 
     <div class="read-more-wrap3"> 
 
     <div class="read-more-target3"> 
 
      <p class="p">Apr 
 
      <p/> 
 
      <p class="p">Apr 
 
       <p/> 
 
       <p class="p">Apr 
 
       <p/> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <input type="checkbox" class="read-more-state4" id="post-4" /> 
 
     <label for="post-4" class="read-more-trigger4"></label> 
 
     <div class="read-more-wrap4"> 
 
     <div class="read-more-target4"> 
 
      <p class="p">May 
 
      <p/> 
 
      <p class="p">May 
 
       <p/> 
 
       <p class="p">May</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 

 

 
    <br style="line-height: 15px;" /> 
 
    <section class="sections2"> 
 
    <h1> 
 
     <span class="ms-rteThemeForeColor-1-0">B</span></h1> 
 
    <p>All content for B.</p> 
 
    <p> 
 
     <a href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
 
     <span class="ms-rteThemeForeColor-1-0">This is a link</span></a> 
 
    </p> 
 
    <p> 
 
     <a class="linkboxes2" href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
 
     <span class="ms-rteThemeForeColor-1-0">This is also a link</span></a> 
 
    </p> 
 
    <p>More content.</p> 
 
    <p> 
 
     <a class="linkboxes2" href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
 
     <span class="ms-rteThemeForeColor-1-0">More Links :)</span></a> 
 
    </p> 
 
    </section> 
 
    <br style="line-height: 15px;" /> 
 
    <section class="sections"> 
 
    <h1>C</h1> 
 
    <p class="p">All content for C.</p> 
 
    <p> 
 
     <a href="/departments/humanresources/test/Pages/default.asp" target="_blank">This is a link</a></p> 
 
    <p> 
 
     <a class="linkboxes" href="/departments/humanresources/test/Pages/default.asp" target="_blank">This is also a link</a></p> 
 
    <p class="p">More content.</p> 
 
    <p> 
 
     <a class="linkboxes" href="/departments/humanresources/test/Pages/default.asp" target="_blank">More Links :)</a></p> 
 
    </section> 
 
</section>

Answer 2

にあなたの隠されたdivをoverflow: hiddenを追加しましたコンテンツを隠しますが、削除しません。それはそこにコンテンツがあるようなものだが、あなたはそれを見ることができない。それはまだスペースを取る。 visibilityとopacityを切り替える代わりに、displayのプロパティをblockからnoneに切り替えると、複数のcssフープでジャンプする必要はありません。