I've got problem... jQuery should only hide divs under each h2, but it hides those h2 aswell... What should I do?
<!DOCTYPE>
<html>
<head>
<title>Yolo</title>
<script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
<main>
<div class="faq">
<h2>Opcja 1</h2>
<div class="answer">
<p>Paragraph under option 1!</p>
</div>
<h2>Opcja 2</h2>
<div class="answer">
<p>Paragraph under option 2!</p>
</div>
<h2>Opcja 3</h2>
<div class="answer">
<p>Paragraph under option 3!</p>
</div>
</div>
</main>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/szkrypt.js"></script>
</body>
</html>
And there is jQuery. I did this via course in book, there it worked, maybe there was something with css classes there... Or maybe it was that, it was done under older version of jQuery.
$(document).ready(function() {
$('.answer').hide();
$('.faq h2').toggle(
function() {
$(this).next('.answer').slideDown();
},
function() {
$(this).next('.answer').fadeOut();
}
);
});
Anonymous User
28-Jan-2015The toggle function you're trying to use is deprecated and removed !
The only toggle() function that is left in jQuery, is the one that toggles visibility, and that's why it's hiding everything.
$('.faq h2').toggle();
... hides every visible h2 element, and shows every hidden h2 element
You'll have to create your own toggle
Also, remove the script tag that is loading jQuery in the head, once is enough !