CODEWITHSUNDEEP
javascriptjqueryhtml
user1617218
user1617218

Reputation:

SlideToggle on only the clicked item

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, how can I toggle one, then if I open the other close the one before?

Upvotes: 0

Views: 66

Answers (2)

MG_Bautista
MG_Bautista

Reputation: 2653

Try this...

$('ul.joinus_subtext').on('click', function(){
    $(this).slideToggle();
});

And remove the onclick="slidecontent();" in the HTML...

Upvotes: 1

NathanBarley
NathanBarley

Reputation: 461

Sorry slight edit;

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

Try;

function slidecontent(that) {
    $(that).find('ul.joinus_subtext:first').slideToggle();
}

Upvotes: 0

Related Questions