Как использовать аккордеон jQueryUI с настраиваемым заголовком и содержимым div?

У меня есть некоторые div, которые я хочу оживить, как аккордеон, для которых, очевидно, наиболее логичным способом это является jQuieryUI accordion. Но так как я не хочу использовать обычные теги <h3> в качестве заголовков, я использую custom headers as described here. Код, который у меня есть, следующий:Как использовать аккордеон jQueryUI с настраиваемым заголовком и содержимым div?

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(function(){ 
     $("#ticket-event-list").accordion({ 
      header: 'event' 
     }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="ticket-event-list"> 
     <div class="event" id="event1">First event</div> 
     <div class="content">The content</div> 
     <div class="event" id="event2">Second event</div> 
     <div class="content">The other content</div> 
    </div> 
</body> 
</html>

Это, однако, ничего не делает. Поскольку я думаю, что просто следую инструкциям, и у меня нет ошибок в моей консоли, я понятия не имею, что я здесь делаю неправильно.

Кто-нибудь знает, как я могу заставить это работать? Все советы приветствуются!

источник

2014-11-05 kramer65

Может попробовать использовать CSS переходы в сторону от запуска CSS в JavaScript, что не работает размер шрифта? Или анимация? –

Вам не хватает . для селектора классов.

$(document).ready(function() { 
 
    $(function() { 
 
    $("#ticket-event-list").accordion({ 
 
     header: '.event' 
 
     //-------^ here 
 
    }); 
 
    }); 
 
});

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div id="ticket-event-list"> 
 
    <div class="event" id="event1">First event</div> 
 
    <div class="content">The content</div> 
 
    <div class="event" id="event2">Second event</div> 
 
    <div class="content">The other content</div> 
 
</div>

источник

2014-11-05 20:09:17

Как использовать аккордеон jQueryUI с настраиваемым заголовком и содержимым div?

ответ

Смежные вопросы