【jQuery】リンクをクリックすると続きが表示されるRead More

Read MoreはjQueryを使って続きを読むを実装するプラグイン。本文中にあるRead Moreリンクをクリックすると続きが表示されるようになります。

JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="read-more-v-1-0.js"></script>

HTML

<span class="read-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Nostrum, molestiae ad possimus itaque asperiores ratione maiores quos ipsa odit totam! Eum ut id non sapiente ipsam necessitatibus accusamus animi atque voluptatum unde ullam odio earum voluptates totam quae, rerum porro corporis sequi, nisi maiores! Esse nulla a facere, accusantium consequuntur expedita aliquid voluptas eum animi fugit hic placeat asperiores soluta mollitia modi aliquam est. Porro dolore possimus rerum, quae quibusdam nesciunt. Quia consectetur minima, ipsam quidem saepe maiores illo error enim recusandae similique.</p></span>
<span class="read-more">
<p>Labore deserunt, tempora. Modi enim quas nulla repellendus a non, vitae, explicabo officiis magnam placeat animi et autem sequi quia dolorum porro iusto voluptatum optio necessitatibus veritatis consectetur odio. Ab voluptas cupiditate aliquid, consectetur, dicta blanditiis fuga. Aperiam fugiat iure, officiis ad consequatur laudantium animi aliquam, ex at ipsam soluta similique quae sequi, assumenda tempore nobis id nostrum aliquid accusantium excepturi facere veritatis. Aliquid perferendis odio, ipsam repellendus similique tempore quo voluptatum dolor alias, atque magnam excepturi assumenda aspernatur aperiam in. Placeat atque fuga nulla beatae cupiditate obcaecati explicabo numquam assumenda vitae facere amet perferendis, id incidunt quia, quod voluptatibus at tempore quisquam necessitatibus delectus modi labore velit ex. Iusto nisi provident unde dolor quis recusandae sapiente <span class="read-more">ratione et libero, accusamus, numquam omnis rem?</span></p></span>
<p>Doloribus ducimus cum distinctio, sed rerum cumque voluptatibus sit quam ea, maiores nemo consequatur modi, aliquam molestias dolorum eveniet est magni iure eum laborum sequi porro quas itaque aliquid. Sunt quod minima distinctio quia laborum, labore, hic libero vel recusandae neque harum accusantium dicta sequi ipsa modi illum nemo molestiae voluptate aperiam numquam officiis velit sit nostrum. Recusandae doloremque laudantium, autem tempora similique eligendi hic dolores dicta nisi perferendis voluptatum iusto odit. Sed, reprehenderit, temporibus repellendus nesciunt consequatur quas dolor perspiciatis praesentium eveniet natus ut voluptates. Placeat quod illum rerum a voluptas magnam!</p>

MITライセンス

 
Read More

【jQuery】リンクをクリックすると続きが表示されるRead More

  • LATEST
  • RELATED
  • POPULAR