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: