I study JS. Trying to do an accordion using jQuery UI. For some reason it does not work, for a long time I have been trying to understand why, what could be the matter? Thanks a lot in advance!
$(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> 
