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

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

サンプル

js

qiita.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 {


    }

});

html

qiita.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>

css

qiita.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;
}