I attempted to create a full-width accordion with the following code:
.page {
margin: 0;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100vh;
}
.content {
-webkit-box-flex: 0.4;
-webkit-flex: 0.4;
-ms-flex: 0.4;
flex: 0.4;
-webkit-transition: -webkit-box-flex 500ms ease-out;
-webkit-transition: -webkit-flex 500ms ease-out;
transition: -webkit-box-flex 500ms ease-out;
transition: -ms-flex 500ms ease-out;
transition: flex 500ms ease-out;
padding: 20px;
}
.content:hover {
-webkit-box-flex: 50;
-webkit-flex: 50;
-ms-flex: 50;
flex: 50;
}<div class="page">
<div class="content one">Content</div>
<div class="content two">New</div>
<div class="content three">Div</div>
<div class="content four">Tag</div>
<div class="content five">Here</div>
</div>However, I struggled to convert the hover effect into a click event using jQuery. Additionally, my attempts to utilize radio inputs to control the size of the "Content" div at the start were unsuccessful.