JSFiddle - React, Tailwind, and code Playground

by arvillarruel

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="prefix">
    Select a prefix:
    <select name="prefix" id="prefix">
        <option value=""></option>
        <option value="mr">Mr.</option>
        <option value="ms">Ms.</option>
        <option value="mrs">Mrs.</option>
    </select>
</label>
<!-- No prefix class, will be seen by all -->
<div class="question">        Will this question be seen by all?                          </div>
<div class="question mr">     What is a question?<br>                    <sup>Mr.</sup>   </div>

<!-- Two prefix classes, will be seen by mr and mrs -->
<div class="question mr mrs"> This question occurs for two prefixes?<br> <sup>M/rs.</sup> </div>

CSS

.question { padding-top: 5px; margin-top: 5px; border-top: 1px solid #ccc; }

JavaScript

var questions = $('.question').filter('.mr');
hideAll();
$('#prefix').change(hideAll);

function hideAll() {
    questions.hide();
    questions.filter('.' + this.value).show();
}