javascript - Swap div content with one button -


i have 2 types content in each div. 1 table , form. want swap pressing button.

html

<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> contact us</i></a> <br style="clear:both" /> <div class="well well-sm">   <div id="table">     <table class="table table-bordered">       <tr>         <th>id</th>         <th>title</th>         <th>price</th>       </tr>       <tr>         <td>001</td>         <td>dl650xt</td>         <td>369000</td>       </tr>     </table>   </div>   <div id="formdiv">     <form class="form" method="post" action="" name="contact" id="contact">       <fieldset>         <legend> contact form </legend>          <div class="form-group has-feedback">           <div class="input-group">             <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>             <input type="text" class="form-control" id="name" name="name" placeholder="name *" />             <span class="form-control-feedback glyphicon"></span>           </div>         </div>          <div class="form-group has-feedback">           <div class="input-group">             <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>             <input type="text" class="form-control" id="email" name="email" placeholder="e-mail *" />             <span class="form-control-feedback glyphicon"></span>           </div>         </div>          <div class="form-group has-feedback">           <div class="input-group">             <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>             <input type="text" class="form-control" id="telefon" name="telefon" placeholder="telefon" />             <span class="form-control-feedback glyphicon"></span>           </div>         </div>          <div class="form-group has-feedback">           <div class="input-group">             <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>             <textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="nachricht*"></textarea>             <span class="form-control-feedback glyphicon"></span>           </div>         </div>          <div class="form-group">           <button type="submit" id="submit" class="btn btn-primary btn-lg">submit</button>           <button type="reset" id="cancel" class="btn btn-danger btn-lg">reset 1</button>         </div>        </fieldset>     </form>   </div> </div>

javascript

$(document).ready(function() {       $('#formdiv').css('border', 'red !important');       //swap content       $('#btn').on('click',function() {         $('#table').hide();         $('#formdiv').prop('display', 'show');       })     });

it's working once. want content swap every click.

here's fiddle : https://jsfiddle.net/krm85qq3/5/

you can use toggle function in order display or hide matched elements.

$('#btn').on('click',function() {     $('#table').toggle();     $('#formdiv').prop('display', 'show'); }) 

$(document).ready(function() {        $('#btn').on('click', function() {          $('#table').toggle();          $('#formdiv').toggle();        });      });
#formdiv {    display: none;    border: red;  }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> contact us</i></a>  <br style="clear:both" />  <div class="well well-sm">    <div id="table">      <table class="table table-bordered">        <tr>          <th>id</th>          <th>title</th>          <th>price</th>        </tr>        <tr>          <td>001</td>          <td>dl650xt</td>          <td>369000</td>        </tr>      </table>    </div>    <div id="formdiv">      <form class="form" method="post" action="" name="contact" id="contact">        <fieldset>          <legend> contact form </legend>            <div class="form-group has-feedback">            <div class="input-group">              <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>              <input type="text" class="form-control" id="name" name="name" placeholder="name *" />              <span class="form-control-feedback glyphicon"></span>            </div>          </div>            <div class="form-group has-feedback">            <div class="input-group">              <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>              <input type="text" class="form-control" id="email" name="email" placeholder="e-mail *" />              <span class="form-control-feedback glyphicon"></span>            </div>          </div>            <div class="form-group has-feedback">            <div class="input-group">              <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>              <input type="text" class="form-control" id="telefon" name="telefon" placeholder="telefon" />              <span class="form-control-feedback glyphicon"></span>            </div>          </div>            <div class="form-group has-feedback">            <div class="input-group">              <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>              <textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="nachricht*"></textarea>              <span class="form-control-feedback glyphicon"></span>            </div>          </div>            <div class="form-group">            <button type="submit" id="submit" class="btn btn-primary btn-lg">submit</button>            <button type="reset" id="cancel" class="btn btn-danger btn-lg">reset 1</button>          </div>          </fieldset>      </form>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more