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
Post a Comment