Html: How do i make label visible for drop-down?

Question

How do I make my label visible?

I have 2 drop-down and 2 labels.

<label for="dropdown" class="answer">Model</label>

This is the label and other on same as this am trying to make it visible when drop-down is shown.

 $(".answer").hide(); 

 <base href="http://ice.com" /> <link rel="stylesheet" href="/gasss/css/ghd.css" type="text/css" media="all" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset> <form id="processContactUs" name="processContactUs" action="/send_form_email.php" method="POST"> <div> <label for="firstName">First name<span class="required">*</span></label> <input id="firstName" name="firstName" value="" type="text"> </div> <div> <label for="lastName">Surname<span class="required">*</span></label> <input id="lastName" name="lastName" value="" type="text"> </div> <div class="option"> <label for="gender">Model<span class="required">*</span></label> <div class="gender radio-pair"> <span> <input id="gender1" name="checkdrop" class="checkdrop" value="Ghd" onClick="ckChange(this)" type="checkbox"> <label for="gender1" onClick="ckChange(this)" >Ghd</label> </span> <span> <input id="gender2" name="checkdrop" class="checkdrop" value="Hair" onClick="ckChange(this)" type="checkbox"> <label for="gender2">Hair Dryer</label> </span> </div> </div> <div> <label for="email">Your email<span class="required">*</span></label> <input id="email" name="email" value="" type="email"> </div> <div class="answer"> <label for="dropdown" class="answer">Model</label> <select id="Ghd" name="dropdown" checked class="dropdown"> <option>Ghd Mk5.0</option> <option>Ghd Ms5.0</option> <option>Ghd SS5.0</option> <option>Ghd MK4.2B</option> <option>Ghd MS4.0</option> <option>Ghd SS4.0</option> <option>Ghd. Mk4.0</option> <option>Ghd. 3.1B</option> <option>Ghd 3</option> <option>Ghd SS</option> </select> </div> <div class="answer"> <label for="dropdown" class="answer">Model</label> <select id="Hair" name="dropdown" class="dropdown"> <option>toys</option> <option>games</option> <option>cartoons</option> </select> </div> <div class="opts"> <p>Please enter your ghd order number where possible</p> </div> <div class="textbox"> <label for="query"> Your query<span class="required">*</span> </label> <textarea id="query" name="query"></textarea> </div> <div class="opts"> </div> <div class="buttons"> <input name="contactUs" value="Submit" type="submit"> </div> </form> </fieldset> </div> <script type="text/javascript"> $('input[name=checkdrop]').click(function() { if (this.checked) { console.log(this.value); $('#' + this.value).parent().show(); } else { $('#' + this.value).parent().hide(); } }); </script> <script> function ckChange(ckType) { var ckName = document.getElementsByName(ckType.name); var checked = document.getElementById(ckType.id); if (checked.checked) { for (var i = 0; i < ckName.length; i++) { if (!ckName[i].checked) { ckName[i].disabled = true; } else { ckName[i].disabled = false; } } } else { for (var i = 0; i < ckName.length; i++) { ckName[i].disabled = false; } } } </script> <script type="text/javascript"> function valueChanged() { $(".answer").hide(); $(".checkdrop").click(function() { if ($(this).is(":checked")) { $(".answer").show(); } else { $(".answer").hide(); } }); }; $(".answer").hide(); </script> 

Hides the label and dropdown on form load so when checkbox are clicked the labels don't show, only the dropdown.

Answer 1

You could either do this in CSS with the display attribute or you could do it straight from JQuery with .show() . Here is an example of showing it after it has been hidden: $(".answer").show();