JSFiddle - React, Tailwind, and code Playground

by dezignas

HTML

<fieldset id="cf_container_47" class="cf_container ccms_form_element mosque_info" style="display: block;">
  <legend>Mosque/Madhab Information</legend>
  
 
  <div style="" id="mosque_criteria_container_div" class="ccms_form_element cfdiv_radio">
    
    <input type="hidden" alt="ghost" value="" name="mosque_criteria">
    <div style="float:left; clear:none;">
      <input type="radio" class="radio" value="Wifaqul Ulama" title="" id="mosque_criteria_0" name="mosque_criteria">
      <label for="mosque_criteria_0">Wifaqul Ulama</label>
      <input type="radio" class="radio" value="Batley Ulama" title="" id="mosque_criteria_1" name="mosque_criteria">
      <label for="mosque_criteria_1">Batley Ulama</label>
      <input type="radio" class="radio" value="Saudi Arabia" title="" id="mosque_criteria_2" name="mosque_criteria">
      <label for="mosque_criteria_2">Saudi Arabia</label>
      <input type="radio" class="radio" value="Other" title="" id="mosque_criteria_3" name="mosque_criteria">
      <label for="mosque_criteria_3">Other</label>
    </div>
    <div class="clear"></div>
    <div id="error-message-mosque_criteria"></div>
  </div>
  <div style="" id="mosque_criteria_if_other_container_div" class="ccms_form_element cfdiv_text">
    <label for="mosque_criteria_if_other">if other:</label>
    <input type="text" name="mosque_criteria_if_other" value="" title="" class="" size="30" maxlength="150" id="mosque_criteria_if_other">
    <div class="clear"></div>
    <div id="error-message-mosque_criteria_if_other"></div>
  </div>

 
</fieldset>

CSS

.clear {
    clear:both;
}

JavaScript

/*

var checkbox = $("input[id*=mosque_criteria_]");
var container = $("#mosque_criteria_if_other_container_div");
*/
function showhidestuff (checkbox,container) {

$(function(){
               
            if (checkbox.val() == "Other") {
            container.show();
            } else {
             container.hide();
            }                                                            

        checkbox.change(function(){                   
            if ($(this).val() == "Other") {
            container.show();
            } else {
             container.hide();
            }                                                            
       });
});
    
   }; 


var checkboxer7 = $("input[id*=mosque_criteria_]");
var container7 = $("#mosque_criteria_if_other_container_div");

showhidestuff (checkboxer7,container7);