Jonathan Grant Jonathan Grant - 5 months ago 22
Javascript Question

jquery for FAQ page

I don't have much experience with jquery so excuse my ignorance. I'm trying to make a FAQ where the answer appears when the question is clicked. Here's some test code. Obviously I'm not doing the jquery right because it's not working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Untitled Document</title>
</head>

<body>
<script>
$('li:not(".q")').hide();

$('li.q').click(
function(){
$('li:not(".q")').slideUp();
$(this).toggleClass('open');
});
</script>

<ul>
<li class="q">Q1. Question
</li>
<li> A. Answer
</li>
</ul>

</body>
</html>

Answer
$(document).ready(function(){
    $('.answer').hide();
    $('.question').on('click', function() {        
         $('.answer').toggle('show');
    });
});

You wanna something like this if I got you right. https://jsfiddle.net/mprzmb7b/1/