jquery - 続きを読む/閉じる jQuery アコーディオン

Question

私はavg の Web サイトで見つかるような jQuery アコーディオンを探していますが、運が悪いので、ここの誰かが私を正しい方向に向けてくれることを願っています。ソースコードまたは例に。

アコーディオンは既に動作していますが、不足していて使用したいのは、続きを読む/閉じる機能です。

Answer 1

const moreText = "Read more";
const lessText = "Read less";
const moreButton = $("button.readmorebtn");

moreButton.click(function() {
  const $this = $(this);
  $this.text($this.text() == moreText ? lessText : moreText).next(".more").slideToggle("fast");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  </p>
  <button class="readmorebtn" type="button">Read more</button>
  <p class="more" style="display:none">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod.
    Praesent commodo cursus magna, vel scelerisque nisl consectetur.
  </p>
</div>

Answer 2

Jquery UI は優れていますが、1 つの小さなアコーディオンだけでも余分なものがたくさんあります。すべての機能を使用する場合は、それを選択してください。

jQuery メソッドのshow()、 hide() または toggle() を使用することもできます。これらについては、リンクをたどってください。ここでは説明しません。

これらすべての問題は、ここでの他の回答のいくつかが示すように、すべてのテキストを表示または非表示にすることです。1 行または 2 行 (または 10 行) の実際のテキストを表示し、ボタン/リンクをクリックしてすべてを表示する場合は、既定のメソッドよりも少し多めの方法が必要です。それを行うための小さなスクリプトが必要な場合、またはその方法を理解したい場合は、ここに私の小さなプラグインがあります。私のスクリプトは、show()/hide() と同様にアコーディオンの開閉をアニメーション化しますが、閉じた位置に事前定義された量のテキストを表示します。

フィドル

お役に立てれば

HTML

<div class="show-more-snippet">
//your text goes here//
</div>
<a href="#" class="show-more">More...</a>

CSS

.show-more-snippet {
    height:35px;  /*this is set to the height of the how much text you want to show based on the font size, line height, etc*/
    width:300px;
    overflow:hidden;
}

jQuery

$('.show-more').click(function() {
    if($('.show-more-snippet').css('height') != '35px'){
        $('.show-more-snippet').stop().animate({height: '35px'}, 200);
        $(this).text('More...');
    }else{
        $('.show-more-snippet').css({height:'100%'});
        var xx = $('.show-more-snippet').height();
        $('.show-more-snippet').css({height:'35px'});
        $('.show-more-snippet').stop().animate({height: xx}, 400);
        // ^^ The above is beacuse you can't animate css to 100%.  So I change it to 100%, get the value, change it back, then animate it to the value. If you don't want animation, you can ditch all of it and just leave: $('.show-more-snippet').css({height:'100%'});^^ //
        $(this).text('Less...');
    }

});

Answer 3

Jquery UI アコーディオンは、あなたが望むことを行います。具体的には、折りたたみ機能を見てください。

作業例:フィドル

HTML

<div id="content">
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet,</p>
    <div class="accordion">
        <h3>Read More</h3>
        <p> nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
</div>

Jquery UI (アコーディオン)

$( ".accordion" ).accordion({
    active: false,
    collapsible: true,
    activate: function( event, ui ) {
        ui.newHeader.text("Close");
        ui.oldHeader.text("Read More");
    },
});

あとは自分好みのスタイルに。

CSS

#content {border-bottom: 1px solid #999; padding-bottom: .5em; }
#content .accordion { font-family: inherited; font-size: 100%; }
#content .ui-accordion .ui-accordion-header { padding: 0; }
#content .ui-accordion .ui-accordion-header-icon { display: none; }
#content .accordion .ui-state-default,
#content .accordion .ui-state-active { border: none; background: none; padding: 0; }
#content .accordion .ui-widget-content { padding: 1em 0 0 .5em; border: none; }

Jquery UI を使用すると、上/下キーのサポートなどの機能が既に追加されており、アニメーションの種類を簡単に変更できるため、便利です。必要に応じて、アクティブ化のイベントをキャプチャして、ヘッダーのテキストを変更することもできます。