ボタンを押すと表示・非表
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!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> |
