Question

We are creating the FAQ section for our project.

Each FAQ question has a slide toggle to slide up or down the answer to a FAQ.

The js we use is :

$(function () 
            {
                $('input#search_term').quicksearch('.portlet ul li', 
                {       
                    loader: 'span.loader'
                    , onBefore: function ()
                    {
                        $('.answer').hide ();
                    }           
                    , noResults: '#no_results'
                });

                $('#search-bar form').live ('submit' , function () { return false; });
                $('.faq .answer').hide ();  
                $('.faq p a').live ('click' , function () { $(this).parent ().next ('.answer').slideToggle (); });
            });

The html for each question , which are contained in individual LI tags is like:

<li style="display:none;">
<p><span class="plus_icon">+</span><a class="faq" href="javascript:;">Question Title here</a></p>
    <div class="answer">
        <p>Answer here</p>
    </div>

All I want to do is add an element which onclick expands ALL or contracts all LI’s

Could anyone help Please.

Answer 1

All you need is a single selector for all of the elements you want to expand/contract. If you have that, you can select on it and use slideDown() or slideUp() to slide all of them at once; jQuery will affect all of them at once. Like so:

HTML:

<span id="expand-all">Expand All</span>
<span id="contract-all">Contract All</span>

JS:

$('#expand-all').click(function() {$('.answer').slideDown();});
$('#contract-all').click(function() {$('.answer').slideUp();});