jquery - jqueryで1ページにタイトルと説明を表示する方法

Question

こんにちはjqueryで同じページにタイトルと説明を作成する方法。このhttp://www.st-andrews.ac.uk/its/projects/のように、各プロジェクト名をクリックすると、その下に説明が開き、前の開いているdivが閉じる別の名前をクリックします。

Answer 1

作業デモ http://jsfiddle.net/tTD4D/

使用するAPI：http: //api.jquery.com/slideToggle/

または、前述のZoltanのように：http：//jqueryui.com/accordion/

これはあなたのニーズに合うはずです:)

コード

$(".title").click(function() {
    $this = $(this);
    $content = $this.next(".content");
    if (!$content.is(":visible")) {
        $(".content:visible").slideToggle(100);
        $content.slideToggle(500);
    }
});​

Answer 2

ここに基本があります

$('.title').on('click', function() {
   if($(this).hasClass('open')) {
      $(this).removeClass('open');
   } else {
      $('.title').removeClass('open');
      $(this).addClass('open');
   }
});

Htmlは次のようになります

<div class="title">
  title here to be clicked
  <p class="desc">blah</p>
</div>

cssはおそらくこのようなものです

.title p {
   display: none
}

.title.open p {
   display:block
}

スライド効果などは、ケーキのアイシングにすぎません。Google で検索できます