「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;
}