admin管理员组

文章数量:1356889

I've got some divs which I want to animate like an accordion, for which obviously the most logical way of doing it is the jQueryUI accordion. But since I don't want to use the usual <h3> tags as headers I use custom headers as described here. The code I have now is as follows:

<html>
<head>
    <script src=".10.1/jquery.min.js"></script>
    <script src=".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>

This however, doesn't do anything. Since I think I'm just following the instructions and I have no errors in my console, I have no idea what I'm doing wrong here.

Does anybody know how I can get this to work? All tips are wele!

I've got some divs which I want to animate like an accordion, for which obviously the most logical way of doing it is the jQueryUI accordion. But since I don't want to use the usual <h3> tags as headers I use custom headers as described here. The code I have now is as follows:

<html>
<head>
    <script src="http://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="https://code.jquery./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>

This however, doesn't do anything. Since I think I'm just following the instructions and I have no errors in my console, I have no idea what I'm doing wrong here.

Does anybody know how I can get this to work? All tips are wele!

  • javascript
  • jquery
  • html
  • css
  • jquery-ui
Share Improve this question edited Aug 18, 2018 at 21:16 marc_s 756k184 gold badges1.4k silver badges1.5k bronze badges asked Nov 5, 2014 at 20:02 kramer65kramer65 54.1k133 gold badges331 silver badges525 bronze badges 1
  • Maybe try using CSS transitions aside from that run the CSS in JavaScript what is not working the font size? Or animation? – CMS_95 Commented Nov 5, 2014 at 20:09
Add a ment  | 

1 Answer 1

Reset to default 9

You are missing . for the class selector.

$(document).ready(function() {
  $(function() {
    $("#ticket-event-list").accordion({
      header: '.event'
      //-------^ here
    });
  });
});
<link href="http://code.jquery./ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery./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>

本文标签： javascriptHow to use jQueryUI accordion with a custom header and content divStack Overflow

版权声明：本文标题：javascript - How to use jQueryUI accordion with a custom header and content div? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743993270a2572536.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。