I am new to web development and I want to add following function to my simple html page but if I press "click me" does not happen anything. description part does not hide and show
I added those codes as below. CSS is working perfectly. but JavaScript does not work. How can I fix this issue
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="hpcss.css">
<script>
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();
// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
$(this).show(0).on('click', function(e) {
// This is only needed if your using an anchor to target the "box" elements
e.preventDefault();
// Find the next "box" element in the DOM
$(this).next('.box').slideToggle('fast');
});
});
</script>
</head>
<body align="center">
<a href="#" class="clickme">Click Me</a>
<div class="box">
First Description
</div>
<a href="#" class="clickme">Click Me</a>
<div class="box">
Second Description
</div>
</body>
</html>
you should do somethings like that:
$(document).ready(function() {
// add your code here
})
you run javascript before finishing load html --> error
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments