El acordeón vertical es bastante popular en el desarrollo web, pero el acordeón horizontal se requiere en algunos casos, por lo que en este artículo usaremos eventos de puntero. Tomaremos el modo de escritura para cambiar la vista del título del acordeón. Y usa la transformación para rotar todo el acordeón.
El siguiente programa ilustra el enfoque anterior:
Programa:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Accordion</title>
<link href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" />
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</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>
Producción:
- Antes de hacer clic en acordeón:
- Después de hacer clic en acordeón:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA