Title: Show/hide fields
Last modified: August 20, 2016

---

# Show/hide fields

 *  Resolved [Bos](https://wordpress.org/support/users/hermanbos/)
 * (@hermanbos)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/showhide-fields/)
 * Bunny Bomb made a very good solution for show/hidding of 1 field. I try to use
   this function more times, however the second hiding doesnot show up?
    The first
   hidefunction operates perfect, I added e second hide function (and i am intending
   to create more hidefunctions). But the field doesnot show up? See the jQuery 
   code and the contactform code here below. The second show/hide function concerns
   hide3. What i am doing wrong?
 *     ```
       /*! jQuery script to hide certain form fields */
       $(document).ready(function() {
       	//Hide the field initially
       	$("#hide1").hide();
         $("#hide2").hide();
       	$("#hide3").hide();
       	//First hidefunction: Laat de tekst zien, waneer resp "ik kom niet", "mijn partner komt niet" gekozen wordt.
       	$('#wieniet').change(function() {
       		if ($("#wieniet").val() == "ik kom niet") {
       			$("#hide1").show();
       		}
       		else {
       			$("#hide1").hide();
       			}
       			if ($("#wieniet").val() == "mijn partner komt niet") {
       			$("#hide2").show();
       		}
       		else {
       			$("#hide2").hide();
       			}
       	});
       //Second hidefunction:Laat de tekst zien, waneer resp "graag informatie over mogelijke invaller", "ik zorg zelf voor een invaller" gekozen wordt.
       	$('#intinv').change(function() {
       		if ($("#intinv").val() == "ja") {
       			$("#hide3").show();
       		}
       		else {
       			$("#hide3").hide();
       			}
         });
       });
       ```
   
 * Contact Form 7 code:
 *     ```
       <table>
       <tr>
   
       <td><label for="wieniet">Wie komt er niet?*</label></td>
       <td>[select* wieniet 20 id:wieniet include_blank class:contactForm "ik kom niet" "mijn partner komt niet" "mijn partner en ik komen niet"]</td>
       <tr>
       <td><div class="hide" id="hide1">
               <label for="telp">Telefoonnr. partner*</label>
               [text* telp 11/11 id:telp class:contactForm]
   
        <label for="intinv">Interesse om met invaller te spelen?*</label>
       [select* intinv include_blank "ja" "nee"]
       </div>
   
       <div class="hide" id="hide2">
                 <label for="mtel">Mijn telefoonnr.*</label>
                 [text* mtel 11/11 id:mtel class:contactForm]
         <label for="intinv">Interesse om met invaller te spelen?*</label>
       [select* intinv include_blank "ja" "nee"]
       </div>
       </tr>
       <tr>
       <td>
       <div class="hide" id="hide3">
         <label for="zinv">Indien er interesse is om met een invaller te spelen:*</label>
       [select* zinv  id:intinv include_blank class:contactForm "graag informatie over mogelijke invaller" "ik zorg zelf voor een invaller"]
       </div>
       </td>
       </table>
       ```
   
 * [http://wordpress.org/extend/plugins/contact-form-7/](http://wordpress.org/extend/plugins/contact-form-7/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Thread Starter [Bos](https://wordpress.org/support/users/hermanbos/)
 * (@hermanbos)
 * [13 years, 6 months ago](https://wordpress.org/support/topic/showhide-fields/#post-3157325)
 * Nobody did help me, so after a long time of trial and error I solved this problem
   myself.
    Every hiding that has to fullfill to the same condition you have to 
   write an if/else statement more with another hide number. Every other hide condition
   you have to write a new JQuery script. See step 3 of the work of BunnyBomb: (
   [http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=39](http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=39)).
   You have to give this script another filename. For instance hidefieldsScript2.
   js. Add this file directly into the “js” folder for your theme (example: “./wordpress/
   wp-content/themes/your-theme-name/js/”. Don’t forget step 5 by adding “<script
   type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/
   hidefieldsScript2.js”></script> to the header.php Now you are able to expand 
   the contact form with extra hidings and new conditions for hiding. It works great!
 *  [Marinko](https://wordpress.org/support/users/weberteam/)
 * (@weberteam)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/showhide-fields/#post-3157372)
 * Hi HermanBos,
 * I have a similar problem using BunnyBomb’s solution but with some customization
   according my needs.
    I have to make a form with a dropdown field such as this:
 * — (blank)
    One kid Two kids Three kids
 * And than, if someone select “One kid”, form will show up just one text field 
   to be filed with kids age.
    If someone select “Two kids”, form will show up two
   text fields so the user can input ages for both kids separately. If someone select“
   Three kids”, form will show up three text fields so user can also input their
   ages separately (and so on if needed).
 * Now, my code looks like this:
 *     ```
       /*! jQuery script to hide certain form fields */
   
       $(document).ready(function() {
   
       	//Hide the field initially
       	$("#onekid").hide();
       	$("#twokids").hide();
       	$("#threekids").hide();
   
       	$('#awesome').change(function() {
       		if ($("#awesome").val() == "1") {
       			$("#onekid").show();
       			$("#twokids").hide();
       			$("#threekids").hide();
       		}
       	});
   
       	$('#awesome').change(function() {
       		if ($("#awesome").val() == "2") {
       			$("#onekid").show();
       			$("#twokids").show();
       			$("#threekids").hide();
       		}
       	});
   
       	$('#awesome').change(function() {
       		if ($("#awesome").val() == "3") {
       			$("#onekid").show();
       			$("#twokids").show();
       			$("#threekids").show();
       		}
       	});
       });
       ```
   
 * and it works except when I click some option from dropdown (eg. Three kids), 
   and than click blank again, it wont clear empty fields!
 * I’ve tried about a 50 different solutions but none with a complete success.
 * Any ideas? Thanks…
 *  Thread Starter [Bos](https://wordpress.org/support/users/hermanbos/)
 * (@hermanbos)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/showhide-fields/#post-3157373)
 * Into my opninion you should define 3 hidings in your js folder:
    hidefieldsScript1.
   js>>age 1 kid hidefieldsScript2.js>> age 1 kid and age 2 kid hidefieldsScript3.
   js>>age 1 kid, age 2 kid and age 3 kid
 *  [Marinko](https://wordpress.org/support/users/weberteam/)
 * (@weberteam)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/showhide-fields/#post-3157374)
 * Thank you HermanBos for a quick answer.
    It looks like I’ve found a solution 
   to keep it all in one .js file 🙂
 * Here is the code:
 *     ```
       /*! jQuery script to hide certain form fields */
   
       $(document).ready(function() {
   
       	//Hide the field initially
       	$("#onekid").hide();
       	$("#twokids").hide();
       	$("#threekids").hide();
   
       	//Show first hidden field
       	$('#awesome').change(function() {
       		if ($("#awesome").val() == "1") {
       			$("#onekid").show();
       			$("#twokids").hide();
       			$("#threekids").hide();
       		}
       		else {
       			$("#onekid").hide();
       		}
       	});
   
       	//Show first & second hidden field
       	$('#awesome').change(function() {
       		if ($("#awesome").val() == "2") {
       			$("#onekid").show();
       			$("#twokids").show();
       			$("#threekids").hide();
       		}
       		else {
       			$("#twokids").hide();
       		}
       	});
   
       	//Show all three hidden fields
       	$('#awesome').change(function() {
       		if ($("#awesome").val() == "3") {
       			$("#onekid").show();
       			$("#twokids").show();
       			$("#threekids").show();
       		}
       		else {
       			$("#threekids").hide();
       		}
       	});
       });
       ```
   
 * So far, it works in Firefox, IE, Opera, but it doesn’t completely work in Chrome(
   it doesn’t hide fields after opening). I must mention that I didn’t use Bunny
   Bomb’s CSS at all.
 * If I make it completely cross-browser compatible, I’ll post it here.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Show/hide fields’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [Marinko](https://wordpress.org/support/users/weberteam/)
 * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/showhide-fields/#post-3157374)
 * Status: resolved