table cell content swap

by abenrob

HTML

<table>
    <tbody>
        <tr>
            <td>boring content</td>
            <td>
            <span class="list-trunc">one<br>two<br>three<br><span class="list-trigger">more</span></span>
                <span class="list-full">one<br>two<br>three<br>four<br>five<br>six<br><span class="list-trigger">less</span></span>
            </td>
            <td>
            <span class="list-trunc">one<br>two<br>three<br><span class="list-trigger">more</span></span>
            <span class="list-full">one<br>two<br>three<br>four<br>five<br>six<br><span class="list-trigger">less</span></span>
            </td>
            <td>boring content</td>
        </tr>
        <tr>
            <td>boring content</td>
            <td>boring content</td>
            <td>boring content</td>
            <td>boring content</td>
        </tr>
    </tbody>
</table>

CSS

td {
    width: 50px;
    padding: 5px 20px;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
}
.list-full {
    display:none;
}
.list-trigger {
    cursor: pointer;
    color: blue;
}

JavaScript

$('span.list-trigger').click(function() {
    if ($(this).parent().hasClass('list-trunc')) {
        $(this).parent().siblings('.list-full').toggle();
    } else if ($(this).parent().hasClass('list-full')) {
        $(this).parent().siblings('.list-trunc').toggle();
    }
    $(this).parent().toggle();
});