Create a horizontal accordion with custom design.

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>