bascule formulaire entre l'affichage entre les champs d'entrée spécifiques et la forme complète

Question

J'ai un formulaire dans une page qui signifie pour gérer les travaux publiés dans une autre page. Le formulaire comporte quelques champs clés qui déterminent si l'offre d'emploi est approuvée ou rejetée. Je voudrais que le formulaire affiche initialement seulement les champs spécifiés comme critiques ou clé pour le processus de sélection. Et aussi avoir un bouton bascule pour afficher le formulaire complet au cas où le réviseur veut plus d'informations sur le travail en cours d'examen.

Comment spécifier les champs que je veux rendre critiques?

Et comment puis-je basculer entre ces champs et le formulaire complet?

La forme que j'ai jusqu'à présent est ce (entrées critiques sont l'industrie, l'expérience et les compétences requises):

<div class="row"> 
<div class="col-md-8 col-md-offset-2 col-sm-6 col-sm-offset-3"> 
    <div class="w-section inverse"> 
     <div class="w-box sign-in-wr bg-5"> 
      <div class="form-body"> 
       <h5> 
        Please provide the following information about employment opportunity. 
       </h5> 
       <div class="row"> 
        <form class="form-light padding-20" id="addJob"> 
         <div class="form-group"> 
          <div class="col-lg-6"> 
           <label style="font-size:16px;" data-for="title">Title</label> 
           <input type="text" class="form-control" name="title" id="title" placeholder=""> 
          </div> 
          <div class="col-md-12"> 
           <label style="font-size:16px;" data-for="salary">Salary</label> 
           <input type="text" class="form-control" name="salary" id="salary" placeholder=""> 
          </div> 
          <div class="col-lg-12"> 
           <label style="font-size:16px;" data-for="location">Location</label> 
           <input type="text" class="form-control" name="location" id="location" placeholder=""> 
          </div> 
          <div class="col-lg-4"> 
           <label style="font-size:16px;" data-for="company">Company</label> 
           <input type="text" class="form-control" name="company" id="company" placeholder=""> 
          </div> 
          <div class="col-lg-4"> 
           <label style="font-size:16px;" data-for="jobDescription">Job Description</label> 
           <input type="text" class="form-control" name="jobdescription" id="jobdescription" placeholder=""> 
          </div> 
          <div class="col-lg-2"> 
           <label style="font-size:16px;" data-for="industry">Industry</label> 
           <input type="text" class="form-control" name="industry" id="industry" placeholder=""> 
           <label class="checkbox"><input type="checkbox" name="profit" id="profit">Profit</a></label> 
           <label class="checkbox"><input type="checkbox" name="nonprofit" id="nonprofit">Non-Profit</a></label> 
          </div> 
          <div class="col-lg-2"> 
           <label style="font-size:16px;" data-for="experience">Experience</label> 
           <input type="text" class="form-control" name="experience" id="experience" placeholder=""> 
          </div> 
          <div class="col-lg-2"> 
           <label style="font-size:16px;" data-for="reqSkills">Skills required</label> 
           <select name="requiredSkillsDropdown"> 
            <option value="HTML5">HTML5</option> 
            <option value="CS3">CS3</option> 
            <option value="javascrip">Javascript</option> 
            <option value="jquery">jQuery</option> 
           </select> 
          </div> 
          <div class="col-lg-6"> 
           <label style="font-size:16px;" data-for="workexp">Address</label> 
           <input type="text" class="form-control" name="street" id="street" placeholder="Street"> 
           <input type="text" class="form-control" name="city" id="city" placeholder="City"> 
           <input type="text" class="form-control" name="state" id="state" placeholder="State"> 
           <input type="text" class="form-control" name="zip" id="zip" placeholder="Zip"> 
          </div> 
          <div class="col-lg-4"> 
           <label style="font-size:16px;" data-for="contact">Contact</label> 
           <input type="text" class="form-control" name="contact" id="zip" placeholder=""> 
          </div> 
          <div class="col-lg-12"> 
           <button class="btn btn-two pull-right" id="capturejobinfo" type="button">Submit</button> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Donnez les conteneurs pour les entrées une coutume data-* attribut indiquant si elles sont critiques ou non (échantillon d'en haut)

<div class="col-lg-2" data-critical="true"> 
    <label style="font-size:16px;" data-for="experience">Experience</label> 
    <input type="text" class="form-control" name="experience" id="experience" placeholder=""> 
</div> 

et pour d'autres utilisent false pour data-critical. Vous pouvez ensuite basculer avec:

$("div.form-group div[data-critical=true]").show(); //to show 

Ou .hide() pour se cacher.