CSSで作ったトグルボタンで開閉して状態を保持する

技術情報
2015.11.30
本ページは広告およびアフィリエイトプログラムによる収益を得ています。

スマートフォンで画面が小さいので、情報のあるエリアをボタンで開閉しつつ状態を保持したい、という場合があると思います。

今回はCSSで作ったトグルボタンで指定したエリアを開閉し、なおかつ状態を保持する方法をご紹介いたします。

サンプル

「お知らせ」をクリックすると開閉し、ブラウザを更新しても開閉の状態が保持されます。

サンプルをご覧ください。

サンプル

ソースと解説

ソースはjs、html、cssの3つとなります。

js

$(function() {

    $("#toggle").click(function() {

        $("#info_display").toggle('fast');

        //クリックした時にcookieのセット確認
        if ($.cookie("info_display")) {

            $.cookie("info_display", '', {

                 //cookie("info_display")を削除

                expires: -1

            });

        } else {

            $.cookie("info_display", '1', {

                 //cookie("info_display")をセット
                expires: 7

            });

        }

    });

    //セットされたcookieの設定
    if ($.cookie("info_display")) {

        //もしcookie("info_display")があれば
        $("#info_display").toggleClass("d_none"); //隠す

    } else {


    }

});

「#toggle」要素をクリックしたときにクッキーがセットされ、状態が保持されることになります。またクッキーの判定が行われ、要素を隠す状態を保持するために「d_none」のクラスで非表示を行っています。

「toggle(‘fast’)」で開閉する速度を決定しています。「fast」で速く、「slow」で遅くなります。

html

ボタン、開閉するエリア、オプションで存在するであろう「もっと見る」要素に分かれています。

<h2 id="toggle" class="toggle">
    お知らせ
</h2>
<ul id="info_display">
    <li><a href="#">お知らせ1</a></li>
    <li><a href="#">お知らせ2</a></li>
    <li><a href="#">お知らせ3</a></li>
</ul>
<p>
    <a href="#" class="more">
        もっと見る
    </a>
</p>

ボタン部分です。

<h2 id="toggle" class="toggle">
    お知らせ
</h2>

非表示される部分です。

<ul id="info_display">
    <li><a href="#">お知らせ1</a></li>
    <li><a href="#">お知らせ2</a></li>
    <li><a href="#">お知らせ3</a></li>
</ul>

オプションの「もっと見る」部分です。

<p>
    <a href="#" class="more">
        もっと見る
    </a>
</p>

css

デフォルトの打ち消しと、トグルボタン、オプションの「もっと見る」、非表示に使用する「display」のスタイルに分かれます。

h2,
p,
#info_display,
#info_display li {
    margin: 0;
    padding: 0;
}

.toggle {
    cursor: pointer;
    position: relative;
    padding: 7px 0;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(169,3,41) 0%, rgb(109,0,25) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.toggle:before {
    display: block;
    content: "";
    position: absolute;
    top: 40%;
    right: 15px;
    width: 10px;
    height: 10px;
    margin: -5px 0 0;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}

a.more {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #FFF;
    text-align: center;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    -moz-border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #BE9999;
}

.d_none {
    display: none;
}

デフォルトのスタイルを打ち消しています。

h2,
p,
#info_display,
#info_display li {
    margin: 0;
    padding: 0;
}

トグルボタンの基本プロパティです。

.toggle {
    cursor: pointer;
    position: relative;
    padding: 7px 0;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(169,3,41) 0%, rgb(109,0,25) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

「.toggle」の「:before」疑似要素でボタンの右端にある三角アイコンを表現しています。

.toggle:before {
    display: block;
    content: "";
    position: absolute;
    top: 40%;
    right: 15px;
    width: 10px;
    height: 10px;
    margin: -5px 0 0;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}

要素を隠す状態の保持を「display: none;」で行っています。

.d_none {
    display: none;
}

全ソース

jqueryは「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>
    CSSで作ったトグルボタンで開閉して状態を保持する
</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(function() {

    $("#toggle").click(function() {

        $("#info_display").toggle('fast');

        //クリックした時にcookieのセット確認
        if ($.cookie("info_display")) {

            $.cookie("info_display", '', {

                 //cookie("info_display")を削除

                expires: -1

            });

        } else {

            $.cookie("info_display", '1', {

                 //cookie("info_display")をセット
                expires: 7

            });

        }

    });

    //セットされたcookieの設定
    if ($.cookie("info_display")) {

        //もしcookie("info_display")があれば
        $("#info_display").toggleClass("d_none"); //隠す

    } else {


    }

});
</script>
<style type="text/css">
h2,
p,
#info_display,
#info_display li {
    margin: 0;
    padding: 0;
}

.toggle {
    cursor: pointer;
    position: relative;
    padding: 7px 0;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top,  rgb(169,3,41) 0%, rgb(109,0,25) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(169,3,41) 0%,rgb(109,0,25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.toggle:before {
    display: block;
    content: "";
    position: absolute;
    top: 40%;
    right: 15px;
    width: 10px;
    height: 10px;
    margin: -5px 0 0;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}

a.more {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #FFF;
    text-align: center;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    -moz-border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #BE9999;
}

.d_none {
    display: none;
}
</style>
</head>
<body>

<h1>
    CSSで作ったトグルボタンで開閉して状態を保持する
</h1>

<h2 id="toggle" class="toggle">
    お知らせ
</h2>
<ul id="info_display">
    <li><a href="#">お知らせ1</a></li>
    <li><a href="#">お知らせ2</a></li>
    <li><a href="#">お知らせ3</a></li>
</ul>
<p>
    <a href="#" class="more">
        もっと見る
    </a>
</p>

</body>
</html>

まとめ

  • ソースはjs、html、cssの3つ。
  • 「#toggle」要素をクリックしたときにクッキーがセットされ、状態が保持される。
  • 要素を隠す状態を保持するために「d_none」のクラスで非表示を行っている。
  • 「toggle(‘fast’)」で開閉する速度を決定している。「fast」で速く、「slow」で遅くなる。
  • jqueryは「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用。

。ボタンの表示に関してはCSS3で表現しているので、比較的新しいブラウザに限定されます。

トグルの動きやクッキーによる動作の保持は、汎用性が高いのでとても便利だと思います。

スポンサーリンク
技術情報
html・cssjQuery
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
フォローしよう
最新情報をお届けします。
スポンサーリンク
ボヘミアン
スポンサーリンク

コメント