JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div class="show-and-hide-content">
    <select>
        <option></option>
        <option data-type="true">true</option>
        <option data-type="false">false</option>
    </select>
    <div class="hidden content content-true">You have selected true.</div>
    <div class="hidden content content-false">You have selected false.</div>
</div>

CSS

.hidden {
    display:none;
}

JavaScript

$(function () {
    $('.show-and-hide-content').each(function (i) {
        var $row = $(this);
        var $selects = $row.find('select');
        $selects.on('change', function () {
         var type = $(this).find('option:selected').attr('data-type');
            $row
                .find('.content').hide()
                .filter('.content-' + type)
                    .show();
        });
    });
});