Open In App

How to set horizontal aligned accordion in Bootstrap 4 ?

Improve
Improve
Like Article
Like
Save
Share
Report

Accordion vertical is quite popular in web development, but horizontal accordion is required in few cases to that in this article we will use pointer-events. We will take the writing mode to change the accordion title view. And use the transform to rotate the whole accordion.

Below program illustrates the above approach: 

Program: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Horizontal Accordion</title>
    <link href=
          rel="stylesheet" />
    <link href=
          rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .accordion {
            text-align: center;
        }
         
        .accordion.width {
            display: flex;
            width: 200px;
        }
         
        .accordion.width .card {
            flex-direction: row;
            min-width: min-content;
        }
         
        .accordion.width .card .card-header {
            cursor: pointer;
            transform: rotate(180deg);
            writing-mode: vertical-rl;
            background-color: #0F9D58;
            border: 2px solid black;
        }
         
        .card-body {
            width: 200px;
            background-color: ;
        }
         
        .collapsing.width {
            transition: width 0.5s ease;
            height: auto;
            width: 10px;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
 
        <!-- Header and tags -->
        <h1>GeeksforGeeks</h1>
        <b>A Computer Science Portal for Geeks</b>
         
 
<p>A Horizontal Accordion</p>
 
 
        <div class="accordion width"
             id="accordionHorizontalExample">
 
            <!-- Accordion group creating-->
            <div class="card">
                <div class="card-header"
                     data-toggle="collapse"
                     data-target="#collapseOne">
                    Accordion Slide 1
                </div>
                <div id="collapseOne"
                     class="collapse show width"
                     data-parent="#accordionHorizontalExample">
                    <div class="card-body">
                        If you like GeeksforGeeks and would like
                      to contribute you can also write an article
                      using write.geeksforgeeks.org
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header"
                     data-toggle="collapse"
                     data-target="#collapseTwo">
                    Accordion Slide 2
                </div>
                <div id="collapseTwo"
                     class="collapse width"
                     data-parent="#accordionHorizontalExample">
                    <div class="card-body">
                        If you like GeeksforGeeks and would like
                      to contribute you can also write an article
                      using write.geeksforgeeks.org
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"
                         data-toggle="collapse"
                         data-target="#collapseThree">
                        Accordion Slide 3
                    </div>
                    <div id="collapseThree"
                         class="collapse width"
                         data-parent="#accordionHorizontalExample">
                        <div class="card-body">
                            If you like GeeksforGeeks and would like
                          to contribute you can also write an article
                          using write.geeksforgeeks.org
                        </div>
                    </div>
                </div>
                <script>
                    var horizontalAccordions = $(".accordion.width");
 
                    horizontalAccordions.each(function() {
                        var accordion = $(this);
                        var collapse = accordion.find(".collapse");
                        var bodies = collapse.find("> *");
                        accordion.height(accordion.height());
                        bodies.width(bodies.eq(0).width());
                        collapse.not(".show").each(function() {
                            $(this).parent().find("[data-toggle='collapse']")
                                .addClass("collapsed");
                        });
                    });
                </script>
          </div>
      </div>
    </center>
</body>
 
</html


Output: 

  • Before Clicking Accordion:

  • After Clicking Accordion:

 



Last Updated : 08 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads