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

技術情報

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

今回は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で表現しているので、比較的新しいブラウザに限定されます。

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

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

コメント