JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<div id="toggle">
    <span data-class="red" class="active">Red</span>
    <span data-class="blue">Blue</span>
</div>
<br>
<div id="wrap" class="red" data-class="red">
    <span class="super">
        <span class="num red">1</span>
        <span class="comma">, </span>
        <span class="num blue">2</span>
        <span class="comma">, </span>
        <span class="num blue">3</span>
    </span>
    <br>
    <span class="super">
        <span class="num red">1</span>
        <span class="comma">, </span>
        <span class="num blue">2</span>
        <span class="comma">, </span>
        <span class="num red">3</span>
        <span class="comma">, </span>
        <span class="num blue">4</span>
    </span>
    <br>
    <span class="super">
        <span class="num">1</span>
        <span class="comma">, </span>
        <span class="num blue">2</span>
        <span class="comma">, </span>
        <span class="num red">3</span>
        <span class="comma">, </span>
        <span class="num red">4</span>
        <span class="comma">, </span>
        <span class="num blue">5</span>
    </span>
    <br>
    <span class="super">
        <span class="num blue">2</span>
        <span class="comma">, </span>
        <span class="num red">3</span>
        <span class="comma">, </span>
        <span class="num">4</span>
        <span class="comma">, </span>
        <span class="num blue">5</span>
        <span class="comma">, </span>
        <span class="num blue">6</span>
        <span class="comma">, </span>
        <span class="num red">7</span>
    </span>
</div>

CSS

/*
.num.red { color: red; opacity: 0.1; }
.num.blue { color: blue; opacity: 0.1; }
#wrap.red .red,
#wrap.blue .blue { opacity: 1; }
*/
.num.red { color: red; display: none; }
.num.blue { color: blue; display: none; }
#wrap.red .red,
#wrap.blue .blue { display: inline; }
#toggle { margin: 20px; border: 1px solid black; display: inline-block; }
#toggle span { padding: 10px; display: inline-block; }
#toggle .active { background-color: #ddd; }

JavaScript

$('#toggle').on('click', 'span', function(){
    var $this = $(this),
        $wrap = $('#wrap'),
        oldClass = $wrap.data('class'),
        newClass = $this.data('class');
    
    $wrap.removeClass(oldClass).addClass(newClass).data('class', newClass);    
    $this.siblings('.active').removeClass('active').end().addClass('active');
    fixCommas();
});
    
function fixCommas(){ 
    $('.super .comma').hide().filter(function(){
        var $this = $(this);
        return $this.prev(':visible').length * $this.nextAll('.num:visible').length !== 0;
    }).show();
}
fixCommas();