jQuery

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

April 18, 2017
hue

HUEは非常に軽くてシンプルなモジュールです。モジュールを使用すると、ウェブサイトでアコーディオンを作成でき、FAQリストを作成するのに便利です。

Include files

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

HTML tags

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

Settings

<script>
    Hue.init({
        animationTime:  300,     //default
        showOnlyOne: true        //default
    }); 
</script>
  1. animationTime - アニメーションの持続時間
  2. showOnlyOne - trueに設定されている場合、同時に1つの回答しか表示されません

Demo/Download