Открытая панель с якорем

Question

Был бы простой способ открыть якорь с аккордеоном Фонда?

Мой простой код (доступен на codepen)

<a href="#panel1" class="link">Open the first panel</a>
<a href="#panel2" class="link">Open the second panel</a>


<ul class="accordion" data-accordion>
  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      I would start in the open state, due to using the `is-active` state class.
    </div>
  </li>

  <li class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 2</a>
    <div class="accordion-content" data-tab-content>
      I would start in the open state, due to using the `is-active` state class.
    </div>
  </li>
</ul>

Я просмотрел документацию Фонда, но там нет упоминаний о заранее спроектированной системе.

Может ли кто-нибудь помочь мне с такой системой? Признаюсь, я не знаю, как это сделать.

Спасибо.

Answer 1

Если вы добавите библиотеку jQuery UI, этот дополнительный код будет работать для вашего примера:

$(".accordion").accordion();
$('a').on('click',function() {
  $('.accordion').accordion("option", "active", $(this).index());
})

CodePen: http://codepen.io/anon/pen/YZQxWd

Лично я бы добавил конкретный идентификатор к этому аккордеону и сослался бы на него, используя его вместо класса аккордеона. Кроме того, я бы закрепил ссылки для использования классом вместо того, чтобы перехватывать все ссылки, как я делал в коде рабочего примера.