Question

I got the following Html:

<ul class="specs">
        <li>
            <div class="trigger">› City (2)</div>
            <div class="cityByLocation">
                <ul>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › New York
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › Chicago
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                </ul>
            </div>
        </li>
<ul>

When i click on “City (2)”, both divs under appear. However, i would like to add a class to them.

This is my js right now:

$('.trigger').click(function ()
    {
        $(this).siblings('div').eq($(this).index()).toggle();

        $(this).eq($(this).index()).toggleClass("locationSelected");

        return false;
    });

This adds a blue background behind the name “City (2)”, but not the underlying divs, which i want.

Its the div with class “cityByLocation” i would like to add the class locationSelected to.

Edit:

I ended up using

$(‘.trigger’).click(function () {
$(this).siblings(‘div’).eq($(this).index()).toggle();
$(this).toggleClass(“locationSelected”);
$(this).siblings(‘div’).eq($(this).index()).toggleClass(“locationSelected”);

return false; });

Answer 1

Rather than using toggleClass, use addClass

$(this).eq($(this).index()).addClass("locationSelected");