[筆記]讓文章有多個開合效果

這篇筆記，是參考了JQuery Effects –Sliding 和Slide down only one instance when multiple ones have same class這個討論串，

加上WFU和MarkX的G+留言提示功能而整理而成的。





所有資源都是來自他們，我只是把它改造成自己想要的樣子(與其說改造還不如說只是英中翻譯)，記下來純粹想當筆記用(´_ゝ`)



意外點到這篇的人不要把這篇當救命稻草抓住不放（？），因為可能有錯，我朋友用這些語法就一直試不出來，唉呀…





不多說，這是語法，放在</head>前面：

<!--文章開合-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

<script>
$(document).ready(function() {
    $('.flip').click(function() {
        $(this)
            .closest('.postsliding')
                .find('.panel')
                    .stop()
                    .slideToggle(300);
    });

});
</script>

然後用Blogger範本設計工具，在進階>新增CSS貼上：

/*文章開合*/ 

.panel
{
display:none;
}

怎樣用CSS讓他們看起來更好看就看使用者的創意，不多說。



在文章中想用到這個效果時照下列格式編輯HTML:

<div class="postsliding">

    <div class="flip">這裡放讓訪客點擊的文字</div>

    <div class="panel">
        這裡放被收進去的內容
    </div>

</div>

效果:

這裡放讓訪客點擊的文字(點我打開)

這裡放被收進去的內容

使用了CSS美化的效果:

2013耶誕冬令集中營



如果圖片量多，又想把很多張圖塞進同一篇文，建議一併安裝Lazy Load。

就這樣。