Adicionar setas para cima/baixo ao acordeão Bootstrap
o meu código actual está aqui (incluindo a demonstração): https://jsfiddle.net/m1xj0avo/
$(function () {
var active = true;
$('#collapse-init').click(function () {
if (active) {
active = false;
$('.panel-collapse').collapse('show');
$('.panel-title').attr('data-toggle', '');
$(this).text('Enable accordion behavior');
} else {
active = true;
$('.panel-collapse').collapse('hide');
$('.panel-title').attr('data-toggle', 'collapse');
$(this).text('Disable accordion behavior');
}
});
$('#accordion').on('show.bs.collapse', function () {
if (active) $('#accordion .in').collapse('hide');
});
});
.panel-title:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button id="collapse-init" class="btn btn-primary">
Disable accordion behavior
</button>
<br/><br/>
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapseOne">
Collapsible Group Item #1
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- Second Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapseTwo">
Collapsible Group Item #2
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- Third Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapseThree">
Collapsible Group Item #3
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>For this SO Question: <a href='http://stackoverflow.com/q/20347553/1366033'>Keep Accordions Open</a>
<br/>Find documentation: <a href='http://getbootstrap.com/javascript/#collapse-usage'>Bootstrap Collapse Usage</a>
<br/>Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a>
<br/>
<div>
1 answers
Existem soluções CSS-only que fazem uso de alguns dos gatilhos que o acordeão do Bootstrap já tem em vigor. Por exemplo, um .panel-title
expandido tem um valor de [area-expanded="true"]
que podemos usar como Selector de CSS.
Com isso em mente podes usar um código como este:
.panel-title {
position: relative;
}
.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 0px;
position: absolute;
font-family: "FontAwesome"
}
.panel-title[aria-expanded="true"]::after {
content: "\f106";
}
/*
* Added 12-27-20 to showcase full title clickthrough
*/
.panel-heading-full.panel-heading {
padding: 0;
}
.panel-heading-full .panel-title {
padding: 10px 15px;
}
.panel-heading-full .panel-title::after {
top: 10px;
right: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne">Collapsible Group Item #1</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- Second Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo">Collapsible Group Item #2</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!-- Third Panel -->
<div class="panel panel-default">
<div class="panel-heading panel-heading-full">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseThree">Collapsible Group Item #3 (panel-heading-ful)</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
Os cuidados são aplicados usando a fonte incrível e o pseudo selector :after
.
Editar 27 de Dezembro 2020:
Criou CSS adicionais para mostrar como permitir que o evento de colapso seja despoletado, carregue em .panel-heading
, removendo o Suporte de enchimento aplica-se a este invólucro e aplicando-o em vez de .panel-title
.
Ver .panel-heading-full
que é aplicado ao último item desmontável.