Skip to content

Instantly share code, notes, and snippets.

@softiconic

softiconic/index.html

Last active December 3, 2023 02:57
Show Gist options
  • Save softiconic/766e9084fb4d3b47a2795937527bbd3b to your computer and use it in GitHub Desktop.
Save softiconic/766e9084fb4d3b47a2795937527bbd3b to your computer and use it in GitHub Desktop.
Download ZIP
Create a horizontal accordion with custom design.
Raw
index.html
<div class="sc_hr_accord">
<ul class="sc_list_hr">
<li id="step_sc_01" class="schide scshow">
<div class="sc_tab_title">
<h4>tab 1</h4>
<svg xmlns="http://www.w3.org/2000/svg" width="12.323" height="21.553" viewBox="0 0 12.323 21.553">
<path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M19.855,16.969,11.7,8.819a1.534,1.534,0,0,1,0-2.175,1.553,1.553,0,0,1,2.182,0l9.24,9.234A1.537,1.537,0,0,1,23.166,18l-9.279,9.3a1.54,1.54,0,1,1-2.182-2.175Z" transform="translate(-11.246 -6.196)" fill="#403e38"/>
</svg>
</div>
<div class="sc_tab_body">
<h3>Title</h3>
<p> Details</p>
</div>
</li>
<li id="step_sc_02" class="schide">
<div class="sc_tab_title">
<h4>tab 2</h4>
<svg xmlns="http://www.w3.org/2000/svg" width="12.323" height="21.553" viewBox="0 0 12.323 21.553">
<path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M19.855,16.969,11.7,8.819a1.534,1.534,0,0,1,0-2.175,1.553,1.553,0,0,1,2.182,0l9.24,9.234A1.537,1.537,0,0,1,23.166,18l-9.279,9.3a1.54,1.54,0,1,1-2.182-2.175Z" transform="translate(-11.246 -6.196)" fill="#fffaf4"/>
</svg>
</div>
<div class="sc_tab_body">
<div class="sc_tab_body">
<h3>Title</h3>
<p> Details</p>
</div>
</div>
</li>
<li id="step_sc_03" class="schide">
<div class="sc_tab_title">
<h4>Tab 3</h4>
<svg xmlns="http://www.w3.org/2000/svg" width="12.323" height="21.553" viewBox="0 0 12.323 21.553">
<path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M19.855,16.969,11.7,8.819a1.534,1.534,0,0,1,0-2.175,1.553,1.553,0,0,1,2.182,0l9.24,9.234A1.537,1.537,0,0,1,23.166,18l-9.279,9.3a1.54,1.54,0,1,1-2.182-2.175Z" transform="translate(-11.246 -6.196)" fill="#403e38"/>
</svg>
</div>
<div class="sc_tab_body">
<div class="sc_tab_body">
<h3>Title</h3>
<p> Details</p>
</div>
</div>
</li>
</ul>
</div>
<style>
.sc_hr_accord {
height: auto;
}
ul.sc_list_hr {
display: flex;
justify-content: end;
padding: 0;
margin: 0;
}
.sc_tab_title {
cursor: pointer;
transition: transform 0.3s ease;
white-space: nowrap;
writing-mode: vertical-rl;
background-color: #F2E5D9;
width: 50px;
height: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 18px 20px 15px;
color: #A8988A;
font-family: "Quara", Sans-serif;
margin-right: 0px;
}
.sc_tab_title h4 {
font-size: 22px;
text-transform: uppercase;
letter-spacing: 1px;
}
#step_sc_01 .sc_tab_title{
background-color: #F2E5D9;
color: #403E38;
}
#step_sc_02 .sc_tab_title{
background-color: #A8988A;
color: #FFFAF4;
}
#step_sc_03 .sc_tab_title{
background-color: #F2E5D9;
color: #A8988A;
}
li#step_sc_01, li#step_sc_02 ,li#step_sc_03 {
display: flex;
}
.schide .sc_tab_body{display:none}
.schide.scshow .sc_tab_body{display:block}
.sc_tab_title svg{
transition: 0.5s ease;
}
.scshow .sc_tab_title svg {
transform: rotate(180deg);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var accordionItems = document.querySelectorAll('.sc_hr_accord .sc_list_hr .schide');
accordionItems.forEach(function (item) {
item.addEventListener('click', function () {
// Remove scshow class from all items
accordionItems.forEach(function (i) {
i.classList.remove('scshow');
});
// Add scshow class to the clicked item
item.classList.add('scshow');
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment