【jQuery】スライドパネルの書き方【サンプル】

今回は、jQueryで「スライドパネル」を実装していきます。

スライドパネルとは？
スライドパネルの書き方
実装結果

スライドパネルとは？

スライドパネルとは、ボタンを押すと中身がスッと上に隠れ、もう一度ボタンを押すと中身がスッと降りてくるものです。

早速実装してみましょう。

スライドパネルの書き方

HTML

まずはHTMLでマークアップします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スライドパネルの実装</title>
  <link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
  <div class="container">
    <p class="open">ボタン</p>
    <div class="slideBox">
      スライドパネルの中身です。ボタンを押すと、中身が開いたり閉じたりします。スライドパネルの中身です。ボタンを押すと、中身が開いたり閉じたりします。スライドパネルの中身です。ボタンを押すと、中身が開いたり閉じたりします。スライドパネルの中身です。ボタンを押すと、中身が開いたり閉じたりします。スライドパネルの中身です。ボタンを押すと、中身が開いたり閉じたりします。スライドパネルの中身です。ボタンを押すと、中身が開いたり閉じたりします。
    </div>
  </div>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
  <script src="./js/main.js"></script>
</body>
</html>

jQuery

jQueryは5行でオッケーです。

$(function () {
  $(".open").click(function () {
    $(".slideBox").slideToggle("slow");
  });
});

CSS

最後にCSSでレイアウトを整えます。

@charset "utf-8";

.open {
    width: 50px;
    margin: 10px 0;
    padding: 10px;
    background: #c71585;
    cursor: pointer;
}
#slideBox {
    display: none;
    padding: 10px;
    border: 1px solid #bfffbf;
}

実装結果

こんな感じで、ボタンと中身ができたと思います。

そしてボタンを押すと、

表示されていた中身が隠れると思います。