1つのボタンでdivコンテンツを入れ替える

Question

各divには2つのタイプのコンテンツがあります。 1つはテーブル、もう1つはフォームです。私はボタンを押すことでそれを交換したい。

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'); 
     }) 
    }); 

それは一度だけ働いています。クリックごとにコンテンツを交換したいここで

はフィドルです：https://jsfiddle.net/krm85qq3/5/

Answer 1

あなたは表示するためにtoggle機能を使用することができますか要素が一致します。

$('#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>

Answer 2

あなたが自動的に表示/非表示状態との間に...トグルjQueryのtoggle()機能を使用することができます:)

Answer 3

トグルは素晴らしい作品が、あなたはまた、手動でそれを処理することができます。たとえば、テーブルが表示されているときに連絡先フォームが表示されているときに特定の機能を実行できるようにする場合です。次のコードは、トグルが行うのと同じことを行い、手動でのみ適用されます。バラエティーに過ぎない上記の例では:)

$(document).ready(function() { 
 
    var formEl = $("#formDiv"), 
 
     tableEl = $("#table"), 
 
     btnEl = $("#btn"); 
 

 
     //swap content 
 
     btnEl.on('click',function() { 
 
     if (tableEl.is(":visible")) { 
 
      tableEl.hide(); 
 
      formEl.show(); 
 
      btnEl.find("i").text(" Return to Table"); 
 
     } else { 
 
      tableEl.show(); 
 
      formEl.hide(); 
 
      btnEl.find("i").text(" Contact Us"); 
 
     } 
 
     }) 
 
    });

#formDiv { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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>

表が表示されていて、ボタンをクリックした場合、私はまた、BTNエルのテキストを変更するようでした。したがって、テーブルelの状態を知り、これを私の手動のトグルポイントとして使用することで、他の要素の状態を自由に変えることができます。