JSFiddle - React, Tailwind, and code Playground

by ecomatt

HTML

<table>
    <tr>
        <td>
            <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> <a id="myHeader1" href="javascript:slideonlyone('newboxes1');">slide this one only</a>

            </div>
            <div class="newboxes2" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
        </td>
        <td>
            <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> <a id="myHeader2" href="javascript:slideonlyone('newboxes2');">slide this one only</a>

            </div>
            <div class="newboxes2" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
        </td>
        <td>
            <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> <a id="myHeader3" href="javascript:slideonlyone('newboxes3');">slide this one only</a>

            </div>
            <div class="newboxes2" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
        </td>
    </tr>
</table>

CSS

.newboxes2 {
    display: none;
}

JavaScript

function slideonlyone(thechosenone) {
    $('.newboxes2').each(function (index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).slideDown(200);
        } else {
            $(this).slideUp(600);
        }
    });
}