部分的に隠されたdivが完全な内容を表示するようにする

Question

解決策が見つかると感謝します。私は部分的に隠されたdiv（divは200pxの高さ）に記事のリストを持っています。私がreadmoreをクリックすると、それはコンテンツの残りの部分を表示してうまくスライドするはずです。ここで

はhtmlです：ここでは

<style> 
    .content {height:200px;} 
</style>  
<div class="content_1">Full text here...</div><a href="" class="readmore"></a> 
<div class="content_2">Full text here...</div><a href="" class="readmore"></a> 
<div class="content_3">Full text here...</div><a href="" class="readmore"></a> 
</div> 

はjqueryのコードは、（それが唯一のcontent_2のためではなく作品です：

var len = $('.wrap > .content').length; 
    $("a.readmore").click(function(event){ 
    var hiddenContent = $(".wrap > .content_2"); 
    event.preventDefault(); 
    hiddenContent.animate({ 
    height: '500px' 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    }); 

は、私はどのようにイテレートん ".content _" +私ので、私ができます 私はそれぞれのためにループしてみました...しかし、私は運が得られませんでした。

Answer 1

jQueryの前の要素を本当に簡単に選択することができます。ハットはコンテンツを表示し、ユーザーがreadmoreリンクを2回クリックした場合は非表示にします。リンクラベルも変更されます。 jQueryのは本当にまっすぐにそれをすべて行います

$("a.readmore").click(function(e){ 
    if($(this).prev("div.content").hasClass("open")){ 
     $(this).prev("div.content").animate({"height":50}).removeClass("open"); 
     $(this).html("More..."); 
    }else{ 
     $(this).prev("div.content").animate({"height":500}).addClass("open"); 
     $(this).html("Less..."); 
    } 

    e.preventDefault(); 
}); 

そして、ここではあなたのためにjsfiddleライブの例です：それはあなたがIDを使用する必要があり、クラスとクラスでなければなりませんhttp://jsfiddle.net/JmLqp/