Horizontal accordion

Bootstrap 5 Horizontal accordion component

Responsive Horizontal accordion built with Bootstrap 5. A horizontal accordion is a horizontally collapsing element to show and hide content via class changes.

Basic example

Horizontal accordion works through class changes. Determine the appearance of your cards in CSS and replace them via JS.

Card 1

Some quick example text to build on the card title and make up the bulk of the card's content.

Card 2

Some quick example text to build on the card title and make up the bulk of the card's content.

Card 3

Some quick example text to build on the card title and make up the bulk of the card's content.

Card 4

Some quick example text to build on the card title and make up the bulk of the card's content.

Card 5

Some quick example text to build on the card title and make up the bulk of the card's content.

Card 6

Some quick example text to build on the card title and make up the bulk of the card's content.

Edit in sandbox 
        
            
      <div class="container horizontal-accordion">
  
        <div class="card choice unset bg-primary text-white mx-2">
          <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-light" data-mdb-ripple-color="dark">Button</button>
          </div>
        </div>
        
        <div class="card choice unset bg-secondary text-dark mx-2">
          <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark" data-mdb-ripple-color="dark">Button</button>
          </div>
        </div>
        
        <div class="card choice unset bg-success text-white mx-2">
          <div class="card-body">
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-light" data-mdb-ripple-color="dark">Button</button>
          </div>
        </div>
        
        <div class="card choice unset bg-warning text-dark mx-2">
          <div class="card-body">
            <h5 class="card-title">Card 4</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-dark" data-mdb-ripple-color="dark">Button</button>
          </div>
        </div>
        
        <div class="card choice unset bg-danger text-white mx-2">
          <div class="card-body">
            <h5 class="card-title">Card 5</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-light" data-mdb-ripple-color="dark">Button</button>
          </div>
        </div>
        
        <div class="card choice unset bg-dark text-white mx-2">
          <div class="card-body">
            <h5 class="card-title">Card 6</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-light" data-mdb-ripple-color="dark">Button</button>
          </div>
        </div>        
      </div>
    
      
        
    
        
             
      .container{
        display: flex;
        width: 100%;
        padding: 0;
   }
    .choice{
        height: 180px;
        box-sizing: border-box;
        padding: 0;
        overflow: hidden;
        float: left;
        align-items: center;
        transition: width 0.2s;
        border-radius:3px;
   }
    .expand{
        width: 65%;
   }
    .unset{
        width: 16%;
        color: black !important;
        background-color: #ddd !important;
   }
    .small{
        width: 5%;
        background-color: #ddd !important;
   }
    .small>div{
        opacity: 0;
   }
    .unset > div > p{
        opacity: 0;
   }
    .expand > div {
        transition-delay: 200ms;
        opacity: 1;
   }
   
      
        
    
        
             
      const choiceArray = document.querySelectorAll(".choice")

choiceArray.forEach((card) => {
    card.addEventListener("click", () => {
        choiceArray.forEach((element) => {
            element.classList.remove("expand", "unset")
            element.classList.add('small')
        })
        card.classList.remove("small")
        card.classList.add('expand')
    });
});