Revealing hidden objects upon click of a button not working - html

Question

I'm trying to set up an aspect of my website where previous articles will be hidden unless someone clicks a button at the bottom of the webpage. I have the div I want hidden until clicked through the display:none functionality. I want the new div to appear and expand the bottom of the page once the button is clicked. To do this, I set the .button:active to change the display to display:block once clicked. Unfortunately, when the button is clicked, nothing happens. I was wondering if you guys could help me with this. I'll include a JS Fiddle of the problem. Thanks!
.StoriesBox {
width: 35.5%;
margin-left: 32.2%;
margin-top: 3%;
line-height: 190%;
}
.StoriesBox2 {
display: none;
width: 35.5%;
margin-left: 32.2%;
margin-top: 3%;
line-height: 190%;
}
.StoriesTitle {
font-size: 165%;
}
.Chinese {
font-family: "Yu Gothic";
font-weight: normal;
}
.StoriesDate {
font-size: 58%;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
margin-top: 4%;
margin-left: 22.5%;
margin-bottom: 5%;
padding: 4%;
padding-top: 1%;
padding-bottom: 3%;
padding-right: 20%;
padding-left: 20%;
text-align: center;
text-decoration: none;
font-size: 70%;
font-family: "eraslight";
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
.button:active .StoriesBox2 {
display: block;
}
<section class="stories">
<div class="StoriesBox">
<div class="StoriesTitle">
<h2>Title Length</h2>
<div class="StoriesDate">
<h3>2018<span class="Chinese"> 年</span> 09<span class="Chinese">月</span> 28<span class="Chinese">日</span></h3>
</div>
<p>Please know, the opinions expressed on this site will portray the cultural, societal, and political differences between China and the United States from my own, personal perspective. This means always highlighting the positives and never sugarcoating
the negatives - a process which always results in concrete critical analysis. If you have any questions, concerns, or just want to chat, please feel free to contact me through one of the media platforms directly below. Thank you and enjoy!</p>
</div>
</div>
<div class="StoriesBox2">
<div class="StoriesTitle">
<h2>Title Length</h2>
<div class="StoriesDate">
<h3>2018<span class="Chinese"> 年</span> 09<span class="Chinese">月</span> 28<span class="Chinese">日</span></h3>
</div>
<p>Hi. My name is Ragan, John Ragan to be exact - but please, call me JR. I'm a third year student who's currently attending Shanghai Jiao Tong University in pursuit of two B.S. in electrical and computer engineering in addition to a B.A. in Chinese</p>
</div>
</div>
<button class="button button5">
<h2>Previous</h2></button>
</section>

Answer 1

You may use this:
.StoriesBox2 + button:active {
display: block;
}
But it will only show the StoriesBox2 div when you click the button. If you want this div to be visible after click, you'll have to use JavaScript.