HTML
<ul>
<li>
<div class="section-title">
<h2>Section 1</h2>
</div>
<div class="section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum temporibus dicta reprehenderit tempore quisquam consequuntur porro omnis laboriosam praesentium at et sapiente, provident sit! Suscipit recusandae, ab ratione dignissimos.</p>
</div>
</li>
<li class="active">
<div class="section-title">
<h2>Section 2</h2>
</div>
<div class="section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora totam delectus, eius nostrum aspernatur voluptas enim fugit ipsa magni voluptatem, odio sit accusamus vel id, commodi consequuntur possimus repellat necessitatibus!</p>
</div>
</li>
<li>
<div class="section-title">
<h2>Section 3</h2>
</div>
<div class="section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur saepe vel facilis quae nihil ad aspernatur ex delectus. Tenetur nulla voluptates similique quos, quia possimus, magnam esse natus quis ipsa.</p>
</div>
</li>
<li>
<div class="section-title">
<h2>Section 4</h2>
</div>
<div class="section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, optio illo, delectus deleniti animi accusamus. Laboriosam maiores totam provident aliquam. Unde, incidunt amet officia a obcaecati, ducimus at molestiae nemo.</p>
</div>
</li>
</ul>
SCSS
* {
box-sizing: border-box;
/* border: 1px solid black; */
}
body {
font-family: 'Lato';
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
}
ul {
display: flex;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
}
li {
flex: 1;
display: flex;
align-items: stretch;
padding: 20px;
background: #E74C3C;
cursor: pointer;
transition: all .5s ease;
&:hover {
background: darken(#E74C3C, 3);
}
&.active {
flex: 5;
background: #fff;
cursor: default;
h2 {
color: #E74C3C;
}
.section-content {
flex: 4;
opacity: 1;
transform: scaleX(1);
color: #E74C3C;
}
}
.section-title {
flex: 1;
display: flex;
align-items: center;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
color: white;
h2 {
margin: 0;
transform: rotate(-90deg);
white-space: nowrap;
}
}
.section-content {
flex: 1;
display: flex;
align-items: center;
margin: 0;
padding: 0;
opacity: 0;
transition: all .25s .1s ease-out;
}
}
