묻고답하기
토글레이어 쿠키 적용법 문의드립니다.
2015.08.03 15:49
안녕하세요~ 쇼핑몰등에서 볼수 있는 위에서 누르면 배너가 나오고 닫히는 슬라이드를 만들었는데요
기본적으로는 열려 있고 닫기를 누르면 닫히게 하였습니다.
근데 쿠키를 적용해서 닫기했을때 하루정도 유지가되도록 하고싶은데 도무지 방법을 모르겠네요 ㅜㅜ
혹시 고수님들께서 알려주시면 감사하겠습니다!
---------------- 토글슬라이드 소스----------------------------------- (파일 첨부하였습니다.)
<!doctype html>
<html lang="KO">
<head>
<title> </title>
<style type="text/css">
html, body { width:100%; height:100%; margin:0px; padding:0px; background-color:#eeeeee; }
.box{ width:100%; height:200px; background-color:#ffffff; display:block; }
.box .box_in { width:800px; height:100%; margin:0px auto; }
.box .box_in div { width:200px; height:100%; float:left; text-align:center; }
.xx { cursor:pointer; }
.nav { width:800px; height:50px; margin:0px auto; border:1px solid gray; background-color:white; }
.nav div { float:left; }
.view { width:100px; height:50px; background-color:red; cursor:pointer; color:white; line-height:50px; }
.main { width:800px; height:1000px; margin:0px auto; background-color:#ffdddd; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var vi = "off";
$(function(){
$(".view").click(function(){
if(vi == "off"){
$(".box").slideDown(500);
vi = "on";
}else{
$(".box").slideUp(100);
vi = "off";
}
});
$(".xx").click(function(){
$(".box").slideUp(100);
vi = "off";
});
});
</script>
<script>
function show(idMyDiv){
var objDiv = document.getElementById(idMyDiv);
if(objDiv.style.display=="block"){ objDiv.style.display = "none"; }
else{ objDiv.style.display = "block"; }
}
function hide(idMyDiv){
var objDiv = document.getElementById(idMyDiv);
if(objDiv.style.display=="none"){ objDiv.style.display = "none"; }
else{ objDiv.style.display = "none"; }
}
</script>
</head>
<body>
<div class="box">
<div class="box_in">
contents
</div>
</div>
<div class="nav">
<div id="opener" class="view" onclick="show('closer');hide('opener'); return false;" style=display:none;>open</div>
<div><span id="closer" class="xx" onclick="show('opener');hide('closer'); return false;">close</span></div>
</div>
</div>
</body>
</html>