jQuery スライドで表示・非表示させる

こちらはjQuery初心者向けです。

スライドして要素を表示・非表示させる

要素をただ表示させるのではなく、少し動的に表示させることはできないでしょうか。
jQueryでは「.animate()」という要素を動かせる関数がありますが、
もっと簡単な「.slideDown()」、「.slideUp()」という関数があります。

まず、次のようなコードを用意しましょう。

slide.html

<!-- jQuery導入 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!-- デザイン定義 -->
<style type="text/css">
.slide-div {
  width: 100px;
  text-align: center;
  border: #000 2px solid;
  padding: 10px;
  display: none;
}
</style>

<!-- 要素定義 -->
<p><button>開く</button></p>
<div class="slide-div">こんにちは</div>

<!-- jQuery定義 -->
<script type="text/javascript">
$(document).ready(function() {
  $(document).on("click", "button", function() {
    $(".slide-div").slideDown();
  });
});
</script>

するとただ「開く」が書いているボタンしか見えないと思います。

「こんにちは」はどこに行った？

なぜ？
デザインを定義したところに「display: none;」があるからです。

では、ボタンを押してみましょう。

なんだか上から下へ動きながら黒い四角が出てきました。

これをもっと応用してみましょう。

最初はボタンが「開く」から押すと「閉じる」に変わるものと
その「閉じる」を押したら「こんにちは」が消えることを。

次のようにコードを書きます。

slide.html

<script type="text/javascript">
$(document).ready(function() {
  $(document).on("click", "button", function() {
    if ( $(".slide-div").css("display") == "none" ) {
      $("button").text("閉じる");
      $(".slide-div").slideDown();
    } else {
      $("button").text("開く");
      $(".slide-div").slideUp();
    }
  });
});
</script>

ifで「.slide-div」の「.css("display")」が「none」だった場合、
「button」の中身を「閉じる」に変更、「.slide-div」を「.slideDown()」します。
逆にelseの場合は「button」の中身を「開く」に戻して、「.slide-div」を「.slideUp()」します。

こちらでは「.slideDown()」は要素を表示させる、「.slideUp()」は非表示させることが分かりましたね。

「.text()」を使ったと思いますが、それ以外にも「.html()」という関数もあります。
こちらはHTMLタグを書くことができます。「.text()」ではただテキストのみ書くことができます。