Dica de Bootstrap – como abrir e fechar um painel

Fala pessoal, essa é uma dica rápida, diversas vezes em meus projetos precisei de um script para abrir e fechar um “panel” do bootstrap como mostro na imagem abaixo:

Para criar esse efeito cole o script abaixo na sua página:

[javascript]
<script type="text/javascript">
jQuery(function ($) {
    $(‘.panel-heading span.clickable’).on("click", function (e) {
        if ($(this).hasClass(‘panel-collapsed’)) {
          // expand the panel
          $(this).parents(‘.panel’).find(‘.panel-body’).slideDown();
          $(this).removeClass(‘panel-collapsed’);
          $(this).find(‘i’).removeClass(‘glyphicon-chevron-down’).addClass(‘glyphicon-chevron-up’);
        }
        else {
          // collapse the panel
          $(this).parents(‘.panel’).find(‘.panel-body’).slideUp();
          $(this).addClass(‘panel-collapsed’);
          $(this).find(‘i’).removeClass(‘glyphicon-chevron-up’).addClass(‘glyphicon-chevron-down’);
        }
    });
});
</script>
[/javascript]

E na página crie o cabeçalho do painel da seguinte maneira:

[html]
<div class="panel-heading">
  <h3 class="panel-title pull-left">Parametros:</h3>
  <span class="pull-right clickable">
<i class="glyphicon glyphicon-chevron-up"></i>
</span>
  <div class="clearfix"></div>
</div>
[/html]

E para finalizar adicione um css para dar aquele efeito de “mãozinha” quando passar o mouse em cima do ícone:

[css]

<style>
.clickable {
cursor: pointer;
}
</style>

[/css]

Pronto, rápido e funcional..é isso ae! Boas festas e ótimo ano novo para todos!!