Skip to content

Instantly share code, notes, and snippets.

@abeMedia
Last active Feb 12, 2018
Embed
What would you like to do?
Pure CSS horizontal accordion slider
.donslide {
display: table;
width: 100%;
}
.donslide .item {
display: table-cell;
width: 1%;
transition: 0.6s ease-in-out all;
overflow: hidden;
position: relative;
min-width: 65px;
}
.donslide .item + .item {
border-left: 1px solid #000;
}
.donslide:hover .item:hover {
width: 100%;
}
/* Vertical item titles */
.donslide .donslide-title {
font-size: 3em;
transform: rotate(90deg);
position: absolute;
right: 0;
bottom: 0;
margin-right: 1.6em;
text-align: right;
transform-origin: 100% 100%;
white-space: nowrap;
padding: 15px;
}
<div class="donslide">
<div class="item">
<div class="donslide-title">Hello World</div>
</div>
<div class="item">
<div class="donslide-title">Foo</div>
</div>
<div class="item">
<div class="donslide-title">Bar</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment