JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<form method="post" action="#">
  
 <div id="startTrendy">Trendy Pics</div>
    <div id="startClassic" style="display:none">Classic Pics</div>

<input type=checkbox name="personal_styles" value="trendy" class="img_change">Trendy
<input type=checkbox name="personal_styles" value="classic" class="img_change" >Classic
 
            <select name="select1" class="img_change">
                <option value="">(choose one)</option>
                <option value="Trendy">Trendy</option>
                <option value="Classic">Classic</option>
                <option value="Chic">Chic</option>               
            </select>
       
        <div class="hide" id="hide1" >
          Clasic Pics
        </div>  
</form>

CSS

.hide {
    display:none;
  font-size:18pt;
  
}

JavaScript

$(document).ready(function(){
    $(".img_change").change(function(){ 
        if ($(this).val() == "Classic" ) { 
            $("#startClassic").slideDown("fast"); //Slide Down Effect 
        } else { 
            $("#startClassic").slideUp("fast");    //Slide Up Effect 
        } 
    });
});