javascript - on selecting checkbox its should open its respective card only in the wizard and remaining should hide -


how go respective card on selecting checkbox tried iam not able move resp card in wizard please can me. if select network in wizard should open network card remaining application , dependent services should hide , same thing remaining.

<div class="wizard" id="addservicedefinationwizard" data-title="add admin">         <button type="button" class="close wizard-close" aria-hidden="true">×</button>         <h1>add admin wizard</h1> 

enter code here ×

add admin wizard

        <div class="wizard-card" data-cardname="card1">             <h3>basic information</h3>                  <div class="form-group col-xs-12">                     <label>name of service</label>                     <input type="text" class="form-control" name="service" placeholder="service name"/>                 </div>                  <div class="form-group col-xs-12">                <div class="demo" > <input type="checkbox" id="service1" name="optioncheck" value="network">network<br>                  <input type="checkbox" id="service2" name="optioncheck">application<br>                  <input type="checkbox" id="service3" name="optioncheck">security<br>                  <input type="checkbox" id="service4" name="optioncheck">dependent service<br>                     </div>            </div>             </div>          <div class="wizard-card" data-cardname="card2" >             <h3>network components</h3>              <div class="form-group col-xs-4">            <div class="wizard-card" data-cardname="card3" id ="demo1">             <h3>application components</h3>                  <div class="form-group col-xs-4">                                         <label>available</label>                                         <select multiple class="form-control" width=50%>                                             <option>option 1</option>                                             <option>option 2</option>                                             <option>option 3</option>                                             <option>option 4</option>                                             <option>option 5</option>                                         </select>                                      </div>                                     <div><input type="button"  align="center" value=">>"><br><br>                                     <input type="button" value="<<">                                       <div class="form-group col-xs-4">                                         <label>selected</label>                                         <select multiple class="form-control width=50%  pull-right box-tools">                                             <option>option 1</option>                                             <option>option 2</option>                                             <option>option 3</option>                                             <option>option 4</option>                                             <option>option 5</option>                                         </select>                                     </div>          </div>>         <div class="wizard-card" data-cardname="card4">             <h3>security</h3>                  <div class="form-group col-xs-4">                                         <label>available</label>                                         <select multiple class="form-control" width=50%>                                             <option>option 1</option>                                             <option>option 2</option>                                             <option>option 3</option>                                             <option>option 4</option>                                             <option>option 5</option>                                         </select>                                         <input type="button" value=">>">                                     </div>                                       <div class="form-group col-xs-4">                                         <label>selected</label>                                         <select multiple class="form-control width=50%  pull-right box-tools">                                             <option>option 1</option>                                             <option>option 2</option>                                             <option>option 3</option>                                             <option>option 4</option>                                             <option>option 5</option>                                         </select>                                     </div>          </div>         <div class="wizard-card" data-cardname="card5">             <h3>dependent service</h3>                  <div class="form-group col-xs-4">                                         <label>available</label>                                         <select multiple class="form-control" width=50%>                                             <option>option 1</option>                                             <option>option 2</option>                                             <option>option 3</option>                                             <option>option 4</option>                                             <option>option 5</option>                                          </select>                                      </div>                                       <div class="form-group col-xs-4">                                         <label>selected</label>                                         <select multiple class="form-control width=40% cellpadding=20%  pull-right box-tools">                                             <option>option 1</option>                                             <option>option 2</option>                                             <option>option 3</option>                                             <option>option 4</option>                                             <option>option 5</option>                                         </select>                                     </div>         </div>        


Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -