CSS: Click button to transition and keep style open - html

Question

That might sound odd, but essentially, I'm trying to make it so when i click on a designated button/spot on a page, it opens up a CSS border box that contains information. I know how to make it hidden, but like when you hover and it appears using the :hover attribute, i want to make it stay permanently visible after the hover transition is complete. Can this be done with CSS? Or is it going to require Javascript? Here is the code I'm using as a starter base.
#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
#information:hover {
left: 74.6%;
}
<div id="information">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</div>
Sorry, I'm new to the site, and I'm still working out how to format my posts.

Answer 1

#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
left: 74.6%;
}
<input type="radio" id="box">
<label id="information" for="box">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</label>
My solution is similar to what #Michael Coker suggested. We can use radio button instead to disable click on label after first click. I removed the inner div inside #information to make HTML W3C valid.

Answer 2

I'm trying to make it so when i click on a designated button/spot on a page, it opens up a CSS border box that contains information.
You can use the "checkbox hack" to pull off changes like this in CSS. https://css-tricks.com/the-checkbox-hack/
#information {
border: solid 2px #FF8000;
border-radius: 20px;
position: absolute;
height: 48%;
width: 24%;
left: =0.6%;
top: 0.7%;
padding: 0.4%;
color: #FFFFFF;
background-color: rgba(114, 70, 0, 0.3);
overflow: hidden;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + label {
left: 74.6%;
}
<input type="checkbox" id="box">
<label id="information" for="box">
<div style=" height: 325px; overflow-x: hidden;" align="left">
<i>Information</i>
<br><br>
</div>
</label>