【jQuery】JSとjQueryを使用した続きを読むスクリプトReadmore JS Accordion

Readmore JS AccordionはJSとjQueryを使用した続きを読むスクリプト。readmore_hideの高さは200px

JS&CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="js/js-readmore.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

HTML

<div class="readmore_wrapper">
<span class="readmore_link">Read <span class="readmore_link-text">More&nbsp;&nbsp;&#x25BC</span></span>
<div class="readmore_content">
<div class="readmore_fade"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis malesuada orci, sit amet iaculis augue elementum et. Sed risus lacus, semper et purus quis, convallis rhoncus nulla. Sed eget sem a risus lobortis posuere sit amet sit amet mi. Integer euismod orci ut dui lobortis fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla cursus vehicula quam. Nullam et volutpat leo. Donec sed nunc at turpis molestie iaculis vel non nisl. Phasellus dui nulla, iaculis a neque ac, tempus facilisis enim. Donec vulputate sagittis nisl, in malesuada libero maximus sit amet. Etiam cursus odio eget accumsan aliquam. Sed vitae laoreet ipsum, in volutpat nisi.</p>
<p>Quisque at nibh tempus, sodales lectus at, dictum felis. Aliquam volutpat pharetra elit non blandit. Vivamus eget tellus vel libero sodales pretium. Mauris luctus massa urna, non aliquam orci accumsan pellentesque. Donec tristique molestie ipsum at sollicitudin. In accumsan arcu sed ligula ornare posuere. Curabitur non rhoncus nisl. Quisque luctus sit amet odio in mattis. Etiam risus lacus, faucibus eu volutpat non, tincidunt id quam. Fusce interdum accumsan urna, vitae cursus leo gravida quis. Sed pulvinar neque eu quam luctus, sit amet cursus lacus mollis.</p>
<p>Integer volutpat nec tellus non posuere. Quisque quam risus, efficitur non efficitur at, euismod non erat. Fusce vel erat at nisi aliquet consectetur sit amet ac purus. Etiam pellentesque orci magna, dapibus congue turpis aliquam vitae. Quisque feugiat elit vel blandit placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eget aliquam metus, congue consectetur nisl. Vivamus tincidunt lorem vitae nulla lobortis, eu facilisis enim rutrum. Fusce pulvinar ligula nec sapien mattis, at euismod tortor aliquam. Nunc efficitur orci enim, a sollicitudin justo viverra eu.</p>
</div>
</div>
 
Readmore JS Accordion

【jQuery】JSとjQueryを使用した続きを読むスクリプトReadmore JS Accordion

  • LATEST
  • RELATED
  • POPULAR