How to set horizontal aligned accordion in Bootstrap 4 ?
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: