jQuery

【jQuery】jQueryとCSSを使った簡単なFAQリストFAQ Accordion

May 3, 2017
Simple FAQ list with jQuery & CSS

FAQ AccordionはjQueryと少しのCSSを使用した軽くてシンプルなアコーディオンを作成でき、FAQリストを作成するのに便利です。

使用方法

Include files

<link rel="stylesheet" href="css/accordion.css"> 
<script src="js/accordion.min.js"></script>  

HTML

<div class="ac">
    <a href="#" class="ac-q">Lorem ipsum ?</a>
    <div class="ac-a">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
    </div>
</div>
<script>
    Accordion.init(); 
</script>

Settings

  1. animationTime
  2. showOnlyOne
<script>
    Accordion.init({
        animationTime:  300,     //default
        showOnlyOne: true        //default
    }); 
</script>