jQuery ボタンを押すと表示・非表

最終更新日

ボタンを押すと表示・非表

<!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>要素を表示・非表示</title>
    <style>
    .box {
    width: 200px;
    height: 200px;
    background: blue;
    }
    button {
    margin-bottom: 10px;
    }
    </style>
</head>

<body>
<h1>ボタンを押すと表示・非表示</h1>
<button id="show">表示</button><button id="hide">非表示</button>
<div class="box"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
      $(function(){
      $('#show').on('click', function(){
         $('.box').slideUp('2000');
      })
      
      $('#hide').on('click',function(){
      $('.box').slideDown('2000');
       })
      });
      </script>
</body>

</html>

シェアする