Accordion menu is not clickable

Question

the menu is showing correctly, but it is not clickable(can't open the item to show the sub items), I'm new to javascript so not sure if the javascript is correct. I also added a link for the font-awesome style sheet and used it to get the icons for the menu. is this the best way to do the menu, or can I do it without javascript

 $(document).ready(function() { var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; var dropdownlink = this.el.find(".dropdownlink"); dropdownlink.on( "click", { el: this.el, multiple: this.multiple }, this.dropdown ); }; Accordion.prototype.dropdown = function(e) { var $el = e.data.el, $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass("open"); if (!e.data.multiple) { $el .find(".submenuItems") .not($next) .slideUp() .parent() .removeClass("open"); } }; var accordion = new Accordion($(".accordion-menu"), false); }); 

 ul { list-style: none; } a { text-decoration: none; } .accordion-menu { width: 100%; max-width: 350px; margin: 60px auto 20px; background: #fff; border-radius: 4px; } .accordion-menu li.open .dropdownlink { color: #CDDC39; } .accordion-menu li.open .dropdownlink .fa-chevron-down { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .accordion-menu li:last-child .dropdownlink { border-bottom: 0; } .dropdownlink { cursor: pointer; display: block; padding: 15px 15px 15px 45px; font-size: 18px; border-bottom: 1px solid #ccc; color: #212121; position: relative; transition: all 0.4s ease-out; } .dropdownlink i { position: absolute; top: 17px; left: 16px; } .dropdownlink .fa-chevron-down { right: 12px; left: auto; } .submenuItems { display: none; background: #C8E6C9; } .submenuItems li { border-bottom: 1px solid #B6B6B6; } .submenuItems a { display: block; color: #727272; padding: 12px 12px 12px 45px; transition: all 0.4s ease-out; } .submenuItems a:hover { background-color: #CDDC39; color: #fff; } 

 <div> <ul class="accordion-menu"> <li> <div class="dropdownlink"><i class="fa fa-user" aria-hidden="true"> </i> <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Personal1</a></li> <li><a href="#">Personal2</a></li> </ul> </li> <li> <div class="dropdownlink"><i class="fa fa-paper-plane" aria- hidden="true"></i> Leave <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Leave1</a></li> <li><a href="#">Leave2</a></li> </ul> </li> <li> <div class="dropdownlink"><i class="far fa-sun" aria-hidden="true"> </i> Configuration <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Configuration1</a></li> <li><a href="#">Configuration</a></li> </ul> </li> <li> <div class="dropdownlink"><i class="fas fa-receipt" aria- hidden="true"></i> Report <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Report1</a></li> <li><a href="#">Report2</a></li> </ul> </li> <li> <div class="dropdownlink"><i class="fas fa-align-justify" aria- hidden="true"></i> Attendance <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Attendance1</a></li> <li><a href="#">Attendance2</a></li> </ul> </li> </ul> 

Answer 1

Include jquery in head tag and Keep your script tag at the end of the html to ensure that it runs after html is loaded.

 ul { list-style: none; } a { text-decoration: none; } .accordion-menu { width: 100%; max-width: 350px; margin: 60px auto 20px; background: #fff; border-radius: 4px; } .accordion-menu li.open .dropdownlink { color: #CDDC39; } .accordion-menu li.open .dropdownlink .fa-chevron-down { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .accordion-menu li:last-child .dropdownlink { border-bottom: 0; } .dropdownlink { cursor: pointer; display: block; padding: 15px 15px 15px 45px; font-size: 18px; border-bottom: 1px solid #ccc; color: #212121; position: relative; transition: all 0.4s ease-out; } .dropdownlink i { position: absolute; top: 17px; left: 16px; } .dropdownlink .fa-chevron-down { right: 12px; left: auto; } .submenuItems { display: none; background: #C8E6C9; } .submenuItems li { border-bottom: 1px solid #B6B6B6; } .submenuItems a { display: block; color: #727272; padding: 12px 12px 12px 45px; transition: all 0.4s ease-out; } .submenuItems a:hover { background-color: #CDDC39; color: #fff; } 

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <ul class="accordion-menu"> <li> <div class="dropdownlink"><i class="fa fa-user" aria-hidden="true"> </i> <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Personal1</a></li> <li><a href="#">Personal2</a></li> </ul> </li> <li> <div class="dropdownlink"><i class="fa fa-paper-plane" aria- hidden="true"></i> Leave <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Leave1</a></li> <li><a href="#">Leave2</a></li> </ul> </li> <li> <div class="dropdownlink"><i class="far fa-sun" aria-hidden="true"> </i> Configuration <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Configuration1</a></li> <li><a href="#">Configuration</a></li> </ul> </li> <li> <div class="dropdownlink"><i class="fas fa-receipt" aria- hidden="true"></i> Report <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Report1</a></li> <li><a href="#">Report2</a></li> </ul> </li> <li> <div class="dropdownlink"><i class="fas fa-align-justify" aria- hidden="true"></i> Attendance <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> <ul class="submenuItems"> <li><a href="#">Attendance1</a></li> <li><a href="#">Attendance2</a></li> </ul> </li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { var Accordion = function (el, multiple) { this.el = el || {}; this.multiple = multiple || false; var dropdownlink = this.el.find(".dropdownlink"); dropdownlink.on( "click", { el: this.el, multiple: this.multiple }, this.dropdown ); }; Accordion.prototype.dropdown = function (e) { var $el = e.data.el, $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass("open"); if (!e.data.multiple) { $el .find(".submenuItems") .not($next) .slideUp() .parent() .removeClass("open"); } }; var accordion = new Accordion($(".accordion-menu"), false); }); </script>