L
L
ligisayan2016-01-08 11:24:03
JavaScript
ligisayan, 2016-01-08 11:24:03

How to create a link that goes to the contents of the accordion tab?

Welcome all! There is a menu on the first page, and an accordion on the second related within the same site. How to make it so that when a menu item is clicked, a page opens with the corresponding expanded tab? This is how the anchor transmits and goes to the page, but does not open the corresponding tab ..

<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 the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question