Создание аккордеона из первого элемента родственных элементов

Я пытаюсь создать аккордеон (чистый CSS или javascript / jquery). У меня есть список ссылок внутри диапазона, но мне нужен аккордеон для работы по щелчку первого элемента внутри этого диапазона и расширения его следующих братьев и сестер, как показано ниже:

<span class = "pager">
   <a href = "#" class = "pager-active">Header</a>
   <a href = "#" class = "">Service 1</a>
   <a href = "#" class = "">Service 2</a>
</span>

Вот пример моей настройки jsfiddle.

https://jsfiddle.net/wb590xs3/7/

Обновлено: я не могу изменить эту структуру HTML, так как это слайдер и нужно, чтобы эти hrefs находились на одном уровне.

что вы пробовали ...?

— 16.03.2018 20:10

@Bhuwan Я знаю, как создавать обычные аккордеоны, например: w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion, но не с использованием первого брата в качестве расширителя

— 16.03.2018 20:18

jquery html css accordion

16.03.2018 20:07

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

167

Ответы 3

Используя Jquery, вы можете использовать аккордеон с этой документацией jQuery Accordion.

Пример

$( function() {
    $( "#accordion" ).accordion();
  } );

<html>
<head>
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel = "stylesheet" href = "/resources/demos/style.css">
  <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id = "accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. 
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. 
    </p>
  </div>
</div>
 
 
</body>
</html>

Я хочу расширить родственного брата первой ссылки в моем примере. Не общий аккордеон. Это было бы похоже на щелчок по разделу 1 h3 и раскрытие элемента раздела 2 h3.

— 16.03.2018 20:23

16.03.2018 20:18

Вы пробовали увидеть плагин свертывания Bootstrap? Просто проверьте это

16.03.2018 20:23

Вы можете попробовать этот способ на чистом CSS:

<style>
  .pager > a {display: block;}
  .pager div {display: none;}
  .pager div:target {display: block;}
</style>
<div class = "pager">
  <a href = "#showServices">Header</a>   
  <div id = "showServices">
    <a href = "#">Service 1</a>
    <a href = "#">Service 2</a>
  </div>
</div>

Надеюсь, поможет.

16.03.2018 20:24