Почему не работает JQuery UI аккордеон?

368
06 марта 2017, 12:11

Изучаю JS. Пытаюсь сделать аккордион с помощю JQuery UI. Почему-то не работает, уже долго пытаюсь понять почему, в чем может быть дело? Заранее большое спасибо!

$(function() { 
  $("#accordion").accordion(); 
});
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <title>Timer</title> 
 
 
</head> 
 
<body> 
  <div id="accordion"> 
    <h1><a href=#>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1> 
 
    <h3><a href=#>Nulla non eleifend magna. Proin luctus ante ac felis blandit vestibulum.</a></h3> 
    <div id="first"> 
      <p>Suspendisse potenti. Donec non venenatis lectus, sagittis faucibus est. Pellentesque lacinia ut odio nec semper. Maecenas eros massa, tristique ut nunc eget, fermentum tempor sapien. Vestibulum arcu leo, condimentum ut augue non, dapibus scelerisque 
        dolor. Pellentesque pellentesque eget nisi at elementum. Etiam eu ante lacus. Etiam lacinia malesuada nisi a ullamcorper. Sed faucibus imperdiet elit, sed posuere tortor porttitor at. Curabitur nisi ante, rhoncus ut est nec, euismod elementum 
        elit. Maecenas at condimentum lorem, ac posuere velit.</p> 
    </div> 
 
    <h3><a href=#>In dignissim, dui non euismod dictum, dolor dolor accumsan arcu, vel ornare elit velit at leo.</a></h3> 
    <div> 
      <p>Curabitur aliquam tellus non metus luctus, ac mattis lectus vehicula. Duis gravida facilisis sapien, facilisis sodales enim semper ut. Curabitur porta magna eu metus posuere, rutrum eleifend nulla imperdiet. Suspendisse a dui blandit, mattis augue 
        et, ultricies diam. Phasellus tincidunt dui et orci bibendum, sit amet mollis nunc convallis. Duis ac ullamcorper tellus, a viverra ante.</p> 
    </div> 
 
    <h3><a href=#>Cras tincidunt leo non quam efficitur, eget scelerisque tortor tempor.</a></h3> 
    <div> 
      <p>Quisque elementum augue ac feugiat sodales. Nam auctor libero at semper aliquet. Nam convallis est nec nisl aliquet bibendum. Sed volutpat sed nisl nec laoreet. Donec dignissim felis a ipsum pellentesque ultrices. Integer vulputate tristique lectus 
        quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tempor nisl ipsum, at vestibulum nulla sagittis vitae. Phasellus at nunc ut odio dictum faucibus.</p> 
    </div> 
 
    <h3><a href=#>Ut ex nisl, ultrices vel sagittis bibendum, mollis efficitur ipsum.</a></h3> 
    <div> 
      <p>Aenean vitae lorem libero. Suspendisse venenatis, libero viverra aliquet facilisis, dui diam egestas nibh, at luctus augue est sit amet lorem. Phasellus non turpis vulputate, lacinia erat et, condimentum lorem. Curabitur ipsum sapien, interdum eget 
        tincidunt at, placerat sed tellus. Nam purus orci, facilisis egestas porta sed, tempor id justo. Fusce elementum, diam sed fringilla congue, erat lectus pharetra purus, et ornare risus velit sit amet risus. Proin eu lorem odio. Nullam eu condimentum 
        nibh. 
      </p> 
    </div> 
 
    <h3><a href=#>Praesent quis lacus posuere, viverra velit eu, vulputate velit. Aliquam sed condimentum nisi.</a></h3> 
    <div> 
      <p>Vivamus dapibus tempor purus. Vivamus et sem id dui placerat elementum. Nunc tristique, lacus quis suscipit gravida, lacus nisi commodo magna, vitae tincidunt metus ex eu sem. Pellentesque et lobortis nunc, eget mattis nisl. Ut feugiat urna ac fringilla 
        dictum. Mauris viverra hendrerit felis, sit amet convallis orci consectetur eu.</p> 
    </div> 
 
  </div> 
 
 
  <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> --> 
 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
</body> 
 
</html>

Answer 1

Уберите h1. Оно считает, что нужно скрывать/показывать h3, а не div

$(function() { 
  $("#accordion").accordion(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="accordion"> 
  <h3><a href=#>Nulla non eleifend magna. Proin luctus ante ac felis blandit vestibulum.</a></h3> 
  <div id="first"> 
    <p>Suspendisse potenti. Donec non venenatis lectus, sagittis faucibus est. Pellentesque lacinia ut odio nec semper. Maecenas eros massa, tristique ut nunc eget, fermentum tempor sapien. Vestibulum arcu leo, condimentum ut augue non, dapibus scelerisque 
      dolor. Pellentesque pellentesque eget nisi at elementum. Etiam eu ante lacus. Etiam lacinia malesuada nisi a ullamcorper. Sed faucibus imperdiet elit, sed posuere tortor porttitor at. Curabitur nisi ante, rhoncus ut est nec, euismod elementum elit. 
      Maecenas at condimentum lorem, ac posuere velit.</p> 
  </div> 
 
  <h3><a href=#>In dignissim, dui non euismod dictum, dolor dolor accumsan arcu, vel ornare elit velit at leo.</a></h3> 
  <div> 
    <p>Curabitur aliquam tellus non metus luctus, ac mattis lectus vehicula. Duis gravida facilisis sapien, facilisis sodales enim semper ut. Curabitur porta magna eu metus posuere, rutrum eleifend nulla imperdiet. Suspendisse a dui blandit, mattis augue 
      et, ultricies diam. Phasellus tincidunt dui et orci bibendum, sit amet mollis nunc convallis. Duis ac ullamcorper tellus, a viverra ante.</p> 
  </div> 
 
  <h3><a href=#>Cras tincidunt leo non quam efficitur, eget scelerisque tortor tempor.</a></h3> 
  <div> 
    <p>Quisque elementum augue ac feugiat sodales. Nam auctor libero at semper aliquet. Nam convallis est nec nisl aliquet bibendum. Sed volutpat sed nisl nec laoreet. Donec dignissim felis a ipsum pellentesque ultrices. Integer vulputate tristique lectus 
      quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tempor nisl ipsum, at vestibulum nulla sagittis vitae. Phasellus at nunc ut odio dictum faucibus.</p> 
  </div> 
 
  <h3><a href=#>Ut ex nisl, ultrices vel sagittis bibendum, mollis efficitur ipsum.</a></h3> 
  <div> 
    <p>Aenean vitae lorem libero. Suspendisse venenatis, libero viverra aliquet facilisis, dui diam egestas nibh, at luctus augue est sit amet lorem. Phasellus non turpis vulputate, lacinia erat et, condimentum lorem. Curabitur ipsum sapien, interdum eget 
      tincidunt at, placerat sed tellus. Nam purus orci, facilisis egestas porta sed, tempor id justo. Fusce elementum, diam sed fringilla congue, erat lectus pharetra purus, et ornare risus velit sit amet risus. Proin eu lorem odio. Nullam eu condimentum 
      nibh. 
    </p> 
  </div> 
 
  <h3><a href=#>Praesent quis lacus posuere, viverra velit eu, vulputate velit. Aliquam sed condimentum nisi.</a></h3> 
  <div> 
    <p>Vivamus dapibus tempor purus. Vivamus et sem id dui placerat elementum. Nunc tristique, lacus quis suscipit gravida, lacus nisi commodo magna, vitae tincidunt metus ex eu sem. Pellentesque et lobortis nunc, eget mattis nisl. Ut feugiat urna ac fringilla 
      dictum. Mauris viverra hendrerit felis, sit amet convallis orci consectetur eu.</p> 
  </div> 
 
</div> 
 
 
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> --> 
 
 
<script src="js/accordion.js"></script>

READ ALSO
Не отправляется запрос на сервер
javascript

Не отправляется запрос на сервер

Не получается отправить post запросТекст ошибки:

 282
Работа resolve в promise
javascript

Работа resolve в promise

Есть такой код, один аспект которого мне не понятен:

 290
Динамически изменять &ldquo;id&rdquo; и &ldquo;label for&rdquo; у инпутов
javascript

Динамически изменять “id” и “label for” у инпутов

Здравствуйте!

 247
Отправка данных формы AJAX
javascript

Отправка данных формы AJAX

Не пойму почему AJAX не передает данные?

 335