Question: 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: 
Using jQuery's next() method (<http://api.jquery.com/next/>) will let you work with the li following the one you clicked on. 

Note that I used show() instead of addClass('open') because I don't know what's in your open class - slideUp() is going to add display:none to all of the answers, so you have to make sure your open class overrides that.

```
$(document).ready(function() {
    $('li.q').on('click', function () {
        $('li:not(".q")').slideUp();
        $(this).next().show();
    });
});

```

I'd also recommend using a CSS class to have your answers already hidden when the page loads; using javascript to do it can result in them all being visible and then quickly hidden.

```
li:not(.q) { display: none; }

```
```
$(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/>