jQueryを利用して、ページ内のコンテンツ(テキストや画像)をslideToggle
で開閉式にしたいと考えています。
[閉じる]ボタンをクリックした歳に開閉式コンテンツ(#readmore-wrap
)のトップにアニメーションで移動させたいと思っています。
私の書いたjsだと[続きを読む]をクリックした歳にも#readmore-wrap
のトップに移動してしまいます。
希望としては以下になります。
javascripに明るくないため見当違いのコードかもしれませんが、ご意見いただければ幸いです。
- [続きを読む]をクリックした歳はそのままコンテンツが
slideToggle
で表示。 - [閉じる]ボタンをクリックした歳にはコンテンツが閉じるのと同時に開閉式コンテンツ(
#readmore-wrap
)のトップにアニメーションで移動
var position = $("#readmore-btn-common").offset().top;
jQuery(document).ready(function($){
jQuery('#readmore-btn-common').click(function () {
$("html,body").animate({
scrollTop : position
}, {
queue : false
});
jQuery('#readmore-wrap').slideToggle(1000,function(){
if (jQuery(this).is(':hidden')) {
jQuery('#readmore-btn-common').html('<span id="readmore-btn-open" >続きを読む</span>');
} else {
jQuery('#readmore-btn-common').html('<span id="readmore-btn-close">閉じる</span>');
}
});
});
});
#readmore-wrap{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 開閉式コンテンツ -->
<div id="readmore-wrap">
<!-- コンテンツの中身 -->
</div>
<!-- /開閉式コンテンツ -->
<span id="readmore-btn-common"><span id="readmore-btn-open">続きをよむ</span></span>