JSFiddle - React, Tailwind, and code Playground

by neonms92

HTML

<div class="table">
    <br class="start" data-index="1" style="display:none">
    <br class="item" data-index="1" style="display:none">
        <div class="row">
            <div class="cell">A1</div>
            <div class="cell">B1</div>
            <div class="cell">C1</div>
        </div>
    <br class="item" data-index="2" style="display:none">
    <div class="row">
        <div class="cell">A2</div>
        <div class="cell">B2</div>
        <div class="cell">C2</div>
    </div>
    <br class="item" data-index="3" style="display:none" />
    <div class="row">
        <div class="cell">A3</div>
        <div class="cell">B3</div>
        <div class="cell">C3</div>
    </div>
    <br class="end" style="display:none" />
</div>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<button class="a">Toggle</button>
<button class="b">ToggleAll</button>

CSS

div.table {
    display:table;
}
div.row {
    display:table-row;
}
div.cell {
    display:table-cell;
}

JavaScript

$('br.start').data('setItemHidden', function(index, hidden) {
    var me = $('br.start');
    var item = me.data('getItemHeader')(index);
    var contents = me.data('getItemContents')(index);
    item.data('hidden', hidden);
    if (hidden) {
        contents.wrapAll('<div style="display:none" />');
    } else {
        contents.children().unwrap();
    }
});
$('br.start').data('getItemHidden', function(index) {
    var me = $('br.start');
    var item = me.data('getItemHeader')(index);
    return item.data('hidden');
});
$('br.start').data('getItemHeader', function(index) {
    var me = $('br.start');
    var item = me.siblings('br.item[data-index=' + index + ']');
    return item;
});
$('br.start').data('getItemContents', function(index) {
    var me = $('br.start');
    var item = me.data('getItemHeader')(index);
    var contents = item.nextUntil('br.item, br.end');
    return contents;
});
$('br.start').data('setHidden', function(hidden) {
    var me = $('br.start');
    var contents = me.nextUntil('br.end');
    me.data('hidden', hidden);
    if (hidden) {
        contents.wrapAll('<div style="display:none" />');
    } else {
        contents.children().unwrap();
    }
});
$('br.start').data('hidden', false);

$('button.a').on('click', function() {
    var index = $('select').val();
    var isHidden = $('br.start').data('getItemHidden')(index);
    if (isHidden === "undefined") {
        isHidden = false;
    }
    $('br.start').data('setItemHidden')(index, !isHidden);
});

$('button.b').on('click', function() {
    var isHidden = $('br.start').data('hidden');
    $('br.start').data('setHidden')(!isHidden);
});