<!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
>
<
h1
>GeeksforGeeks</
h1
>
<
b
>A Computer Science Portal for Geeks</
b
>
<
p
>A Horizontal Accordion</
p
>
<
div
class
=
"accordion width"
id
=
"accordionHorizontalExample"
>
<
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
>