次のトグルを組み合わせて、最初の段落内のスパンとして more ボタンを使用して最初の段落を表示します。more をクリックすると他の段落が表示されて more ボタンが非表示になりますが、less ボタンをクリックすると more ボタンに戻る必要があります。
<script>
$('div#introduction').each(function(){
var NODES = $(this).find('p').length;
if(NODES>0){
$(this).find('p:first').addClass('first');
$(this).find('p:last').addClass('last');
$('#introduction p.first').append(' <span class="more"><a class="toggle">More</a></span>');
$('#introduction p.last').append(' <span class="less"><a class="toggle">less</a></span>');
$('#introduction p').hide().slice(0,1).addClass('fixed').show();
$('.toggle').click(function(){
$( ".more" ).hide();
$('p:not(.toggle,.fixed)').toggle();
$(this).text(function(_, ML){
return ML === 'Less' ? 'More' : 'Less';
});
});
}
});
</script>
よろしくお願いします
ストゥ