Bootstrap 3 - Аккордеон

<style>
.spoiler_links {
  display: block;
}
.spoiler_body {
  display: none;
}
@media (min-width: 992px) {
  .spoiler_links {
    display: none;
  }
  .spoiler_body {
    display: block;
  }
}
</style>
...
<a href="#" class="spoiler_links">Спойлер (кликните для открытия/закрытия)</a>
<div class="spoiler_body alert alert-info">
  <p>...</p>
</div>
...
<script>
$(function () {
  $('.spoiler_links').click(function (e) {
    e.preventDefault();
    $(this).next('.spoiler_body').toggle();
  });
});
</script>

<script>
// получаем все элементы collapse
$('.collapse').each(function(index){
  // получаем текущий id элемент
  var id = $(this).prop('id');
  // установим этому элементу id равный текущему id + индекс
  $(this).prop('id', id + index);
  // найдём элемент в родительском, который ссылается на id и добавим к его href индекс
  $(this).parent().find('[href="#' + id + '"]').attr('href', '#' + id + index);
});
</script>

$(document).ready(function(){
    $(".navbar-collapse a").click(function() {
        if (window.matchMedia('screen and (max-width: 767px)').matches) {
          $("#toggleSample2").collapse('toggle');
        }
    });
});

$(function(){
  idCollapse = 'toggleSample';
  // при открытии добавляем в хранилище ключ toggleSample
  $('#'+idCollapse).on('shown.bs.collapse', function () {
    localStorage.setItem(idCollapse, 'in');
    console.log('dd');
  });
  // при скрытии удаляем из хранилища ключ toggleSample
  $('#'+idCollapse).on('hidden.bs.collapse', function () {
    localStorage.removeItem(idCollapse);
  });
  // проверяем если ли значение в LocalStorage, и в зависимости от него открываем или скрываем содержимое
  if (localStorage.getItem(idCollapse) != null) {
    $('#'+idCollapse).addClass('in');
  } else {
    $('#'+idCollapse).removeClass('in');  
  }
});

$(function(){
  $('#accordion1 .collapse').on('show.bs.collapse', function () {
    $('#accordion1 .collapse').not(this).removeClass('in');
  });
});

$(function(){
  var accrd = $("#accordion");
  accrd.accordion({
    autoHeigth: false,
    activate: function(click){save();}
  });
  function save(){
    var active = accrd.accordion("option","active");
    SetCookie("accordion", active);
  }
  function push(){ 
    var active = parseInt(GetCookie("accordion")) || 0;
    accrd.accordion("option","active",active);
  }  
  push();
});

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#content1">Контент 1</a>
      </h4>
    </div>
    <div id="content1" class="panel-collapse collapse">
      <div class="panel-body">
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#content2">Контент 2</a>
      </h4>
    </div>
    <div id="content2" class="panel-collapse collapse">
      <div class="panel-body">
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#content3">Контент 3</a>
      </h4>
    </div>
    <div id="content3" class="panel-collapse collapse">
      <div class="panel-body">
      </div>
    </div>
  </div>
</div>

<script>
$(function(){
  $('#accordion .collapse').on('show.bs.collapse', function () {
    $(this).find('.panel-body').load(this.id+'.txt');
  });
});
</script>

<button id="controlContent" class="btn btn-danger" data-toggle="collapse" data-target="#toggleContent">Показать содержимое</button>

<div id="toggleContent" class="collapse">
  Контент...
</div>

<script>
$(function(){
  $('#toggleContent').on('show.bs.collapse', function(){
    $('#controlContent').text('Скрыть содержимое');
  });
  $('#toggleContent').on('hide.bs.collapse', function(){
    $('#controlContent').text('Показать содержимое');
  });
});
</script>

<nav class="navbar navbar-default">
<!-- ... -->
  <div class="collapse navbar-collapse" id="main-menu">
    <ul class="nav navbar-nav">
      <!-- ... -->
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 
          <span class="chevron">
     	    <i class="fa fa-chevron-down" aria-hidden="true"></i>
          </span>
          <ul class="dropdown-menu">
            <!-- ... -->

$(function() {
  $('#main-menu .dropdown').on('show.bs.dropdown', function() {
    $(this).find('.chevron i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
  });
  $('#bs-example-navbar-collapse-1 .dropdown').on('hide.bs.dropdown', function() {
    $(this).find('.chevron i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
  });
});

$(function() {
  $('#accordion .collapse').on('show.bs.collapse', function() {
    $(this).prev('.panel-heading').find('.chevron').addClass('chevron-up');
  });
  $('#accordion .collapse').on('hide.bs.collapse', function() {
    $(this).prev('.panel-heading').find('.chevron').removeClass('chevron-up');
  });
});

$(function() {
  $('#accordion .collapse').on('show.bs.collapse', function() {
    $(this).prev('.panel-heading').find('.chevron i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
  });
  $('#accordion .collapse').on('hide.bs.collapse', function() {
    $(this).prev('.panel-heading').find('.chevron i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
  });
});

// collapse - id collapse-блока 
$(document).click(function(event) {
  if ($(event.target).parents('#collapse').length==0) {
    $('#collapse').collapse('hide');
  };
});

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#collapse-1" data-parent="#accordion" data-toggle="collapse">Вкладка 1</a></li>
    <li><a href="#collapse-2" data-parent="#accordion" data-toggle="collapse">Вкладка 2</a></li>
    <li><a href="#collapse-3" data-parent="#accordion" data-toggle="collapse">Вкладка 3</a></li>
  </ul>
</nav>

<script>
$(function() {

  var accordion = function(){
    var currentPanel = $('#accordion .panel-collapse.in');
    console.log('currentPanel='+currentPanel);
    var idCurrentPanel = currentPanel.attr('id');
    console.log('idCurrentPanel='+idCurrentPanel);
    var currentHref;
    if (idCurrentPanel) {
      currentHref = '#'+idCurrentPanel;
    }
    console.log('currentHref='+currentHref);
    return function(myHref) {
      console.log('href='+myHref);
      var newPanel = $('#accordion ' + myHref);
      console.log(newPanel);
      var idNewPanel = newPanel.attr('id');
      console.log('idNewPanel='+idNewPanel);
      console.log('idCurrentPanel='+idCurrentPanel);
      if(idCurrentPanel!=idNewPanel) {
        if (currentPanel) {
          currentPanel.removeClass('in');
        }
        newPanel.addClass('in');
        currentHref = myHref;
        currentPanel = newPanel;
        idCurrentPanel = idNewPanel;
      }
      else {
        currentPanel.toggleClass('in');
      }
    };
  };
  
  var accrdn = accordion();

  $('#accordion a[data-toggle="collapse"]').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    accrdn($(this).attr('href'));
  });

});
</script>

<a href="index2.html#collapseOne">Страница 2 (вкладка 1)</a>
<a href="index2.html#collapseTwo">Страница 2 (вкладка 2)</a>
<a href="index2.html#collapseThree">Страница 2 (вкладка 3)</a>
<!-- collapseOne, collapseTwo, collapseThree - id блоков аккордеона -->

<script>
$(function(){
  var hash = window.location.hash;
  $('.panel-collapse').hide();
  $('.panel-collapse').each(function(){
    $(this).removeClass('in');
  });
  if (hash) {
    $(hash).show().addClass('in');
  }
  else {
    $('#collapseOne').show().addClass('in');
  }
});
</script>

<div id="div1">
1
</div>
<div id="div2" style="display:none">
2
</div>

<script>
$(function(){
  $('#div1').click(function(){
    $(this).hide();
    $('#div2').show();
  });
  $('#div2').click(function(){
    $(this).hide();
    $('#div1').show();
  });  
});
</script>

class="panel-collapse collapse in">

$(function() {
  $('#accordion .collapse.in').prev().addClass("active-panel");
  $('#accordion .collapse').on('show.bs.collapse', function () {
    $(this).prev().addClass("active-panel");
  })
  $('#accordion .collapse').on('hide.bs.collapse', function () {
    $(this).prev().removeClass("active-panel");
  })
});

.active-panel {
  background-color: #5be08d !important;
}

// после загрузки страницы
$(function() {
  // изменить цвет фона открытой panel-heading на активный
  $('#accordion .collapse.in').prev().css("backgroundColor", "#5be08d");
  // при открытии панели изменяем цвет фона panel-heading на активный
  $('#accordion .collapse').on('show.bs.collapse', function () {
    $(this).prev().css("backgroundColor", "#5be08d");
  })
  // при закрытии панели изменяет цвет фона на неактивный
  $('#accordion .collapse').on('hide.bs.collapse', function () {
    $(this).prev().css("backgroundColor", "#f5f5f5");
  })
});

<!-- 1 панель -->
<div class="panel panel-default">
  <!-- Заголовок 1 панели -->
  <div class="panel-heading" data-toggle="collapse" data-target="#collapseOne">
    <h4 class="panel-title">
      Заголовок панели
    </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
    <!-- Содержимое 1 панели -->
    <div class="panel-body">
      ...
    </div>
  </div>
</div>

$(function() {
  $(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
      $(this).collapse('hide');
    }
  });
});

article.accordion {
  display: block; overflow: auto; width: 663px; margin: 0 auto; 
}
article.accordion section {
  position: relative; display: block; float: left; width: 37px; height: 300px; margin: 3px 0 3px 3px;
  color: #337AB7; background-color: #337AB7; overflow: hidden; border-radius: 3px; border: 1px solid #337AB7; 
}
article.accordion section h2 {
  position: absolute; font-size: 16px; width: 300px; height: 37px; top: 300px; left: 0; text-indent: 1em;
  padding: 0; margin: 0; color: #fff; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);
}
article.accordion section h2 a {
  display: block; width: 100%; line-height: 37px; text-decoration: none; color: inherit; outline: 0 none;
}
article.accordion section:target {
  width: 500px; padding: 0 15px; color: #333; background-color: #fff; 
}
article.accordion section:target h2 {
  position: static; font-size: 16px; text-indent: 0; color: #333; -webkit-transform: rotate(0deg);   -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
}
article.accordion section, article.accordion section h2 {
  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease;   -o-transition: all 0.3s ease; transition: all 0.3s ease;
}

<article class="accordion">
  <section id="acc1">
    <h2><a href="#acc1">Раздел 1</a></h2>
    <p>...</p>
  </section>
  <section id="acc2">
    <h2><a href="#acc2">Раздел 2</a></h2>
    <p>...</p>
  </section>
  <section id="acc3">
    <h2><a href="#acc3">Раздел 3</a></h2>
    <p>...</p>
  </section>
  <section id="acc4">
    <h2><a href="#acc4">Раздел 4</a></h2>
    <p>...</p>
  </section>
  <section id="acc5">
    <h2><a href="#acc5">Раздел 5</a></h2>
    <p>...</p>
  </section>
</article>

...
<a data-toggle="collapse" class="accordion-toggle" href="#accordion1_2" target="_parent">
...