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:
- Before Clicking Accordion:
- After Clicking Accordion:
- How to accordion scroll to top to open content in Bootstrap ?
- How to change (-, +) symbol with a button in Bootstrap Accordion ?
- How to make a Bootstrap 4 accordion collapse when clicking the whole header div ?
- How to make horizontal scrollable in a bootstrap row?
- How to display multiple horizontal images in Bootstrap card ?
- How to automatically close all collapsible elements inside of the accordion when closing the accordion?
- Bootstrap (Part-4) | Vertical Forms, Horizontal Forms, Inline Forms
- How to create Right Aligned Menu Links using HTML and CSS ?
- How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
- Sementic-UI | Accordion
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- CSS | Layout - Horizontal & Vertical Align
- How to make horizontal line with words in the middle using CSS?
- How to make a div fill a remaining horizontal space using CSS?
- How to set horizontal skew of a canvas circle using Fabric.js ?
- How to lock the horizontal movement of a canvas text using Fabric.js ?
- How to lock horizontal scaling of a text canvas using Fabric.js ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.