Как создать ссылку по которой переходит на содержимое вкладки аккордеона?

Question

[ligisayan]

Приветствую всех! Есть на первой странице меню, а на второй связанной в рамках одного сайта аккордеон. Как сделать так, чтобы по клику пункта меню открывалась страница с соответствующей раскрытой вкладкой? Вот так-то якорь передает и на страницу-то переходит, но вкладку соответствующую не открывает..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<!-- Меню на первой странице index.html -->
<nav class="navbar navbar-default">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="index2.html#collapse-1">Вкладка 1</a>
    </li>
    <li><a href="index2.html#collapse-2">Вкладка 2</a>
    </li>
    <li><a href="index2.html#collapse-3">Вкладка 3</a>
    </li>
  </ul>
</nav>

<!-- Аккордион на второй странице index2.html -->
<div id="accordion" class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title"><a href="#collapse-1" data-parent="#accordion" data-toggle="collapse">Вкладка 1</a></h2>
    </div>
    <div id="collapse-1" class="panel-collapse collapse in">
      <div class="panel-body">
        <p>Текст 1</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title"><a href="#collapse-2" data-parent="#accordion" data-toggle="collapse">Вкладка 2</a></h2>
    </div>
    <div id="collapse-2" class="panel-collapse collapse">
      <div class="panel-body">
        <p>Текст 2</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h2 class="panel-title"><a href="#collapse-3" data-parent="#accordion" data-toggle="collapse">Вкладка 3</a></h2>
    </div>
    <div id="collapse-3" class="panel-collapse collapse">
      <div class="panel-body">
        <p>Текст 3</p>
      </div>
    </div>
  </div>
</div>

$(function() {
      if (window.location.hash.length > 0) {
        $('a[href="' + window.location.hash + '"]').click();
      }
    }

Answer 1

[fend]

Идея в том, чтобы проверить, подходящий ли хэш и есть ли на странице элемент с id равным хэшу страницы (это довольно удобно - оба они начинаются с одного и того же символа.
PS: код я не тестировал.

$(document).ready(function() {
    if (location.hash.startsWith('#collapse-') && $(location.hash).length !== 0) {
        $(location.hash + ' panel-body').expand();
    }
});

Comments

[ligisayan]

Прописываю код на принимающей странице, обрамляю в $(document).ready(function(){..}); - правильно? получаю ошибку:

Uncaught TypeError: $.load is not a function

или нужно в $.load тег указать?

[fend]

ligisayan: я давно на jquery не писал, точно не помню обработчики)
в общем, наверное вот так нужно:
$(document).ready(function() {
if (location.hash.startsWith('#collapse-') && $(location.hash).length !== 0) {
$(location.hash + ' panel-body').expand();
}
});

[fend]

ligisayan: а вообще, хоть и к данной ситуации это мало имеет отношения, попробуйте вот эту штуку: angularlight.org
она простая как дважды два и экономит много времени

[ligisayan]

fend спасибо за наводку, которая помогла мне прийти к правильному ответу

[ligisayan]

$(function() {
  if (location.hash.startsWith('#collapse-') && window.location.hash.length > 0) {
    var a = 'a[href="' + window.location.hash + '"]';
    $(a).click();
    $('#accordion ' + a).click();
  }
});