Blog

HOME > Web > JQuery > 【jQuery】開閉ボタン付きアコーディオン/プルダウン

【jQuery】開閉ボタン付きアコーディオン/プルダウン

2015/08/04

JQuery

備忘録です。

参考サイト
jQuery 開閉ボタンつきアコーディオン マウスオーバーあり
【コピペOK】jQueryのアコーディオンメニュー実装サンプル10選！

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>
<script>
    $(function(){
        $("#accordion dt").on("click", function() {
            $(this).next().slideToggle();
            $(this).toggleClass("active");
        });
    $("#accordion dt").mouseover(function(){
        $(this).addClass("over");   
    });
    $("#accordion dt").mouseout(function(){
        $(this).removeClass("over");    
    });
    });
</script>

CSS

#accordion {
    width:400px;
}
#accordion dt {
    cursor:pointer;
    background-image: url(images/toggle_demo01/plus.gif);
    background-repeat: no-repeat;
    background-position: 350px center;
    border:solid 1px #ccc;
    padding:15px;
    font-size:14px; 
}
#accordion dd{
    display:none;
    font-size:14px;
    line-height:140%;
    margin:0;
    padding:15px;   
    }
#accordion dt.active{
    background-image: url(images/toggle_demo01/minus.gif);
}
#accordion dt.over {
    background-color: #CCC;
}

HTML

<dl id="accordion">
  <dt>メニューボタン</dt>
  <dd>
  テキストテキストテキスト
　</dd>
</dl>

シンプル版

DEMOページ

HTML

<div id="openclose">
    <dl>
        <dt class="open_tit btn-select">ここをクリック1</dt>
        <dd class="open-btn">テキストテキストテキスト</dd>
        <dt class="open_tit btn-select">ここをクリック2</dt>
        <dd class="open-btn">テキストテキストテキスト</dd>
    </dl>
</div>

JS
開いた時にactiveが追加されるようにします。

<script type="text/javascript">
    $(document).ready(function() {
        
        $(".open-btn").hide();
        $(".btn-select").on("click", function() {
            $(this).next().slideToggle();
            $(this).toggleClass("active");//追加部分
        });
        
        var windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0);

    });
</script>

CSS
activeの有り無しで矢印が変わります。

#openclose dt{
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}
#openclose .open_tit.active::after {
    content: "↑";
}
#openclose .open_tit::after {
    content: "↓";
}

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

神社仏閣ホームーページ制作

ホームページ制作問合せ

口コミロボ