Question

Trying to build a FAQ page using jQuery. This is the js I’m working with:

$("#faq li").click(function (event) {
    event.preventDefault(); 
    $(this).next("#faq li ul").slideToggle("fast");
});

Not sure why it isn’t working, any help is appreciated.

Here is the HTML:

<ul id="faq">

<li>Where are you located?
<ul>
We are located in Southern Cali!
</ul>
</li>

<li>What are your service times?
<ul>
Our service times are 7:00, 8:00, and 9:00!
</ul>
</li>

</ul>

Answer 1

A <li> must always be a child of a <ul>, and a <ul> can contain nothing else. That latter point means that your markup is invalid.

You should perhaps use a <dl> (definition list) instead and then use <dt> for the item titles and <dd> for the item text. That would be the sort of list intended exactly for this use case:

<dl id="faq">
<dt>Where are you located?</dt>
<dd>We are located in Southern Cali!</dd>
<dt>What are your service times?</dt>
<dd>Our service times are 7:00, 8:00, and 9:00!</dd>
</dl>

with code as follows (using event delegation)

$("#faq dt").click(function() {
   $(this).next('dd').slideToggle('fast');
});