Question

Right now I have the following Jquery, which when clicking on a table row it closes the rows under it.

<script type="text/javascript">
$(function () {
    $("tr.spaceUnder").hide();
    $('tr:not(.spaceUnder)').click(function () {
        $(this).nextUntil('tr:not(.spaceUnder)').toggle();
    });
});

Now what I want is when I click on the row which toggles the rows under it, is to show an open / close icon or +/- whatever.

This is what the row looks like which has the toggle on it.

<tr class="countryRow categoryHeader">
        <td colspan="3" class="">
            <span class="listItemHeader">
                <%#((Item)Container.DataItem)["Name"]%>
            </span>
        </td>
        <td>
            <a href="#" style="float: right;"><img width="20"  src="/Images/sBackTopPic.png"></a>
        </td>
    </tr>

So on the toggle I would like to change css class on the a href in the second td in the row, so on initial load show closed icon since, then on click the open icon..then when click again the closed icon. So I was wondering how I could add the css class on my a href with my current toggle logic.

Answer 1

It is confusing exactly what you are trying to do. but below on your click function it checks the anchor to see if it has class-one, if it does then remove that class and add another class. If not do the opposite.

$(function () {
        $("tr.spaceUnder").hide();
        $('tr:not(.spaceUnder)').click(function () {
            $(this).nextUntil('tr:not(.spaceUnder)').toggle();
            if($('a', this).hasClass("class-one"))
            {
              $('a', this).removeClass("class-one");
              $('a', this).addClass("class-two");
            {
            else
            {
              $('a', this).removeClass("class-two");
              $('a', this).addClass("class-one");
            }
        });
    });