How do I make this expand/collapse FAQ list to work?

Question

Here's my list that I want to expand/collapse: My goal is simply to toggle expand/collapse, to have this list act like an accordion. What I don't understand is how to get the <div> from a hidden state to a visible state using the javascript provided below. Any resources or direct help is greatly appreciated.

Shipping

<li class="plusimageapply"><a name="faq-question">Why do I see prices for some items and not others? How do I get pricing on items that I want to buy?</a></li>

<div style="display: none;">Ths is a sampel of an answer tot he above question.</div>

<li class="plusimageapply"><a name="faq-question">How do I handle an overnight delivery?</a></li>

<div style="display: none;">AMOeasy offers five overnight shipping options. During checkout, simply check the option that best meets your needs and process your order.
  <ul>
    <li>UPS orders must be placed before 5:30pm EST / 2:30pm PST.</li>
    <li>FedEx orders must be place before 8:00pm EST / 5:00pm PST.</li>
  </ul>
  If you are concerned that the item may not be in stock, please call customer service at 877-AMO-4LIFE (877-266-4543).
</div>

The following is the JavaScript I'm using

<script type="text/javascript">
$(document).ready(function(){
    $('li a').click(function () {
        var questionname= this.name;
        $("#"+questionname).toggle();
        $(this).parent().toggleClass("minusimageapply");
    });
});
</script>

Solution 1

May I suggest some valid HTML (given that an li is a valid child of only an ol or ul and a div is not a valid child of either of those elements), such as:

<ul>
    <li class="q">Question One</li>
    <li>first answer to question one</li>
    <li>second answer to question one</li>
    <li class="q">Question two</li>
    <li>first answer to question two</li>
    <li>second answer to question two</li>
    <li class="q">Question three</li>
    <li>first answer to question three</li>
    <li>second answer to question three</li>
</ul>

And the jQuery:

$('li:not(".q")').hide();

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

JS Fiddle demo.

Or with a dl:

<dl>
    <dt>Question One</dt>
    <dd>first answer to question one</dd>
    <dd>second answer to question one</dd>
    <dt>Question two</dt>
    <dd>first answer to question two</dd>
    <dd>second answer to question two</dd>
    <dt>Question three</dt>
    <dd>first answer to question three</dd>
    <dd>second answer to question three</dd>
</dl>
​

And the jQuery:

$('dd').hide();

$('dt').click(
    function() {
        var toggle = $(this).nextUntil('dt');
        toggle.slideToggle();
        $('dd').not(toggle).slideUp();
    });​

JS Fiddle demo.

Solution 2

try this one

$('li a').click(function () {
    var $this = $(this);
    $this.parent().next().toggleClass("minusimageapply").slideToggle();
});​

*Live example *

Comments

[Sikshya Maharjan]

I don't see any elements with an id in your code, whereas the $("#"+questionname) selects an element whose id is equal to whatever is returned by questionname. Also, a div is not a valid child of a ul or ol, and an li is an invalid child of anything except an ol or ul.

[user1322429]

Thank you very much for your help. I'm quite a novice, as it can be seen, in understanding JavaScript and how it relates and change HTML&CSS. I'm much clearer on the relationship between ol, ul and li vs div Thank you again.

[user1322429]

Thank you for the suggestion, I wasn't able to make it work with what I was trying to do. Mostly thank you for the live example. I didn't know such a service existed to play with JavaScript, Styling, and HTML. Thanks again!

[user1322429]

A big THANK YOU to you sir. Especially for the link to jsfiddle.net. I didn't know such a service existed. The examples you gave will help me on my next task. For this task I needed to hand it off to another developer to expedite it. Your help and examples are greatly appreciated. Take care!

[Sikshya Maharjan]

May I suggest then, that if these answers were useful to you, that you up-vote them (clicking on the ▲ besides the answer) or accept the answer (click on the ✓ besides the answer that most helped, since you can accept only one answer per question). See: How does accepting an answer work?.

[user1322429]

I want to but I'm ultra-new to stackoverflow and don't even have the minimum 15 reputation points. However, I was able to check this answer. Thank you again David.