Question

I´m using this to show a sublist:

    function slidecontent() {
        $('ul.joinus_subtext').slideToggle();
    }

and I have this markup:

    <ul class="joinus">
        <li onclick="slidecontent();">Benefactor
            <ul class="joinus_subtext">
                 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia mi a turpis tempor blandit. Vestibulum ante ipsum primis in faucibus orci 
                                luctus et ultrices posuere cubilia Curae; Nullam sit amet ante sed tellus rutrum porta ut non ipsum.</li>
            </ul>
        </li>
        <li onclick="slidecontent();">Protector
            <ul class="joinus_subtext">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia mi a turpis tempor blandit. Vestibulum ante ipsum primis in faucibus orci 
                                luctus et ultrices posuere cubilia Curae; Nullam sit amet ante sed tellus rutrum porta ut non ipsum.</li>
            </ul>
        </li>
    </ul>

The problem I have is that when I click on one LI it toggles all, not just this one,

What I want to achieve is that if I click on one, it shows its content and if I click on the other, then it hides the one that was open and open the one I clicked. Any ideas how to do this?

Answer 1

The selector you are using $('ul.joinus_subtext') will give you all the ul with class joinus_subtext and function slideToggle will be applied to all of them, Pass the parent object of element you want to slide to the javascript function and pass it to selector as a context.

Live Demo

Html

<li onclick="slidecontent(this);">Benefactor

Javascript

function slidecontent(sourceObj) {
    $('ul.joinus_subtext', sourceObj).slideToggle();
}