使用嚴格的HTML/CSS隱藏和顯示內容

Question

我知道你可以使用JavaScript/jQuery隱藏和使用toggle（）函數在HTML中顯示內容，但是，這將如何在準系統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>