I am experiencing a challenge with implementing multiple accordion menus on my website. Whenever I attempt to duplicate the code, the new accordion menu appears but clicking on the first bar simply scrolls me back to the top of the webpage.
Below is the HTML code:
<div class="container">
<h1>Accordion Dropdown</h1>
<div class="accordion">
<dl>
<dt><a class="accordionTitle" href="#">Test Accordion 1</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. </p>
</dd>
<dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 2</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</dd>
<dt><a href="#" class="accordionTitle">Test Simple Flat UI CSS Accordion 3</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. </p>
</dd>
</dl>
</div>
The CSS code is provided below:
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato';
}
h1 {
font-size: 2em;
padding: 2em;
text-align: center;
}
.accordion dl {
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: #1abc9c;
color:#fafafa;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #16a085;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle {
background-color: #22313F;
border-bottom:...
Lastly, here is the JS/jQuery code snippet:
<script>
( function( window ) {
'use strict';
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
define( classie );
} else {
window.classie = classie;
}
})( window );
var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
e.stopPropagation();
e.preventDefault();
if(e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if(classes) {
for(var x = 0; x < classes.length; x++) {
if(classes[x] == "accordionTitle") {
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});
</script>