クリックイベントで要素の表示を切り替え の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• クリックイベントで要素の表示を切り替え へ行く。
• クリックイベントで要素の表示を切り替え の差分を削除

[[jQueryめも]]

最初は非表示で、ボタンクリックで表示・非表示を切り替えます。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 <script>
 $(function(){
     $('#button').on('click', function() {
         if ($('#detail').css('display') == 'none') {
             $('#detail').slideDown();
             $('#button').text('非表示');
         } else {
             $('#detail').slideUp();
             $('#button').text('表示');
         }
     });
 });
 </script>
 
 <style>
 #detail {
     display: none;
 }
 </style>
 
 <button type="button" id="button">表示</button>
 
 <div id="detail">
     詳細内容
 </div>