【jQuery】折りたたみ可能なボックスプラグインjQuery Collapsable

jQuery

jQuery Collapsable

April 7, 2018

jQuery Collapsableは軽量で折りたたみ可能なボックスjQueryプラグイン。モバイルブラウザを含むクロスブラウザ互換

HTML

<div class="collapsable collapsable-basic">
  <h5 class="ca-control">Basic collapsable box</h5>
  <div class="ca-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia lorem sit amet elit ullamcorper hendrerit. Pellentesque rhoncus eget sem in varius. Nulla congue lectus sed leo scelerisque scelerisque. Cras iaculis pulvinar velit. Proin ac lectus at elit tristique rhoncus. In pellentesque blandit feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean at dictum purus. Sed non fringilla dolor.</p>
  </div>
</div>

<div id="ca-1" class="collapsable collapsable-toggle">
  <h5 class="ca-control"><a href="#ca-1" class="ca-ico">Collapsable with toggle</a></h5>
  <div class="ca-box">
    <p>Nulla sit amet euismod nulla. Nunc tincidunt lectus eget felis volutpat, non scelerisque erat ornare. Phasellus vehicula ex eu tincidunt sodales. In hac habitasse platea dictumst. Donec tincidunt malesuada mi, vel sagittis arcu facilisis eget. Nam arcu ipsum, cursus sit amet purus vel, aliquet elementum dui. Nulla ultrices pulvinar velit, sit amet egestas est varius sed. Etiam tempor ex non porta porta. In interdum blandit urna ac vulputate. Nam facilisis arcu congue, fermentum enim vel, blandit mauris. Donec consectetur luctus volutpat.</p>
  </div>
</div>

<div id="ca-2" class="collapsable collapsable-slide">
  <h5 class="ca-control"><a href="https://github.com/zipper/jquery.collapsable" class="ca-ico">Sliding collapsable box</a></h5>
  <div class="ca-box">
    <p>Curabitur sed orci at elit euismod euismod et ac sem. Phasellus mattis arcu vitae dapibus sagittis. Mauris sit amet dictum velit, vitae venenatis lectus. Donec velit nisi, laoreet vel risus iaculis, maximus cursus sem. Suspendisse potenti. Nulla molestie purus sit amet lectus varius consequat ac ut neque. Donec eu tincidunt ex. Maecenas cursus semper ex finibus eleifend. Nullam erat neque, elementum ac egestas sit amet, porttitor eget sem.</p>
  </div>
</div>

JavaScript

$('.collapsable-basic').collapsable();

$('.collapsable-toggle').collapsable({
  fx: 'toggle'
});

$('.collapsable-slide').collapsable({
  fx: 'slide',
  fxDuration: 300
});

MIT

Latest Posts

Related Posts