What's wrong with my JQuery code? The accordion is not working
Question
Any ideas as to why the accordion is not working? I am a noob :(
I have no clue what is wrong with it.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Accordion</title>
<script type="text/javascript"
<script> src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$( function() {
$("#accordion").accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
Stuff
</div>
<h3>Section 2</h3>
<div>
Stuff
</div>
<h3>Section 3</h3>
<div>
Stuff
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
Stuff
</div>
</div>
</body>
</html>
2 answers
solution1
0 2018-04-09 03:15:40
<script type="text/javascript"
<script> src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Your HTML is invalid. Tags need to be closed, and attributes of a tag need to be immediately after the tag < , before its > .
You also need to include jquery-ui . See:
$(function() { $( "#accordion" ).accordion(); });
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Accordion</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="accordion"> <h3>Section 1</h3> <div> Stuff </div> <h3>Section 2</h3> <div> Stuff </div> <h3>Section 3</h3> <div> Stuff <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>Section 4</h3> <div> Stuff </div> </div> </body> </html>
solution2
0 2018-04-09 07:54:41
Looks like you used the .accordion() function from jQuery UI but you didn't included the file. Also the source of your jquery file is not correct. I'm pasting here the right code. I have used simple jquery toggle function to make it. I'm also adding some CSS in header. You can write it in your CSS file if you are using any external.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Accordion</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.stuff {
display: none;
padding: 10px;
}
.stuff.active {
display: block;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#accordion h3").click(function(){
var stuff = $(".stuff");
$(stuff).slideUp();
$(this).next(".stuff").slideDown();
});
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div class="stuff active"> Stuff </div>
<h3>Section 2</h3>
<div class="stuff"> Stuff </div>
<h3>Section 3</h3>
<div class="stuff"> Stuff
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div class="stuff"> Stuff </div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.