厳密なHTML/CSSを使用してコンテンツを隠して表示する

Question

JavaScript/jQueryを使用してHTMLのコンテンツを非表示にすることはできますが、toggle（）関数を使用すると、HTMLやCSSのベアボーンではどうなりますか？私は次のコードを持っていた場合？

<div class="story" id=part1"> 
    Part 1 of story 
    <a href="#" id="button1">Click Here to go to Part 2</a> 
</div> 

<div class="story" id="part2"> 
    Part 2 of story 
    <a href="#" id="button2">Click Here to go to Part 1</a> 
</div> 

#part2 { 
    display: none; 
} 

Answer 1

この小さなトリックはJavaScriptなしで、CSSとHTMLのみをお試しください。

.wrapper { 
 
     height: 100px; 
 
     width: 400px; 
 
     overflow: hidden; 
 
} 
 

 
.story { 
 
    color: white; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
#part1 { 
 
    background-color: green; 
 
} 
 

 
#part2 { 
 
    margin-top: 10000px; 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="story" id="part1"> 
 
     Part 1 of story 
 
     <a href="#part2" id="button1">Click Here to go to Part 2</a> 
 
    </div> 
 

 
    <div class="story" id="part2"> 
 
     Part 2 of story 
 
     <a href="#part1" id="button2">Click Here to go to Part 1</a> 
 
    </div> 
 
</div>