Vanila JS Accordion

Developer
Umar Hamza
Size
2,524 Kb
Views
10,120
  1. Vanila JS Accordion Previews
  2. Vanila JS Accordion HTML Codes
  3. Vanila JS Accordion CSS Codes
  4. Vanila JS Accordion JS Codes

How do I make an vanila js accordion?

What is a vanila js accordion? How do you make a vanila js accordion? This script and codes were developed by Umar Hamza on 27 December 2022, Tuesday.

Vanila JS Accordion Previews
IQ Test

Vanila JS Accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vanila JS Accordion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<meta charset=utf-8>	<title>jQuery Events 201</title>	<link rel="stylesheet" href="style.css">	<style type="text/css">	#animatedElem { position: absolute; width: 20px; height: 20px; background: transparent;	}	</style>
</head>
<body>
<dl>	<dt>What are your hours?</dt>	<dd>We are open 24/7.</dd>	<dt>What are your hours?</dt>	<dd>We are open 24/7.</dd>	<dt>What are your hours?</dt>	<dd>We are open 24/7.</dd>	<dt>What are your hours?</dt>	<dd>We are open 24/7.</dd>	<dt>What are your hours?</dt>	<dd>We are open 24/7.</dd>
</dl>
<div id="animatedElem"><div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
<script>
// $('dd').filter(':nth-child(n+4)').addClass('hide');	// $('dl').on('mouseenter', 'dt', function() {	//	$(this)	//	.next()	//	.slideDown(200)	//	.siblings('dd')	//	.slideUp(200);	// });
</script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Vanila JS Accordion - Script Codes CSS Codes

body { width: 500px; margin: auto; text-align: center;
}
dl {
}
dd { margin: 0; padding: 1em 0;
}
dt { cursor: pointer; font-weight: bold; font-size : 1.5em; line-height: 2em; background: #e3e3e3; border-bottom: 1px solid #c5c5c5; border-top: 1px solid white;
}
dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }
.hide { display: none;}

Vanila JS Accordion - Script Codes JS Codes

(function() {
var details = document.querySelectorAll('dd'),	list = document.querySelector('dl');
for (var i = 1; i < details.length; i++) {	details[i].className = 'hide';
};
list.addEventListener('click', function(e){	if (e.target.tagName === 'DT') {	for (var f = 0; f < details.length; f++) {	details[f].setAttribute('class', 'hide');	};	e.target.nextElementSibling.removeAttribute('class', 'hide')	//console.dir(e.target)	};
}, true);
//Animate the box height and then hide
setTimeout(function() {console.log('yay')}, 3000)
var elem = document.getElementById("animatedElem"), left = 0, timer;
// Move the element 10px on the right every 16ms
timer = setInterval(function() { elem.style.left = ( left += 10 ) + "px"; // clear the timer at 400px to stop the animation if ( left == 400 ) { clearInterval( timer ); }
}, 16);
})(); // iffy
Vanila JS Accordion - Script Codes
Vanila JS Accordion - Script Codes
Home Page Home
Developer Umar Hamza
Username umarhamza
Uploaded December 27, 2022
Rating 3
Size 2,524 Kb
Views 10,120
Do you need developer help for Vanila JS Accordion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Umar Hamza (umarhamza) Script Codes
Name
React Playground
Image Hover
DBrand Inspired Header
Directory
Form
Image Hover 2
JS Prototypes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!