slideToggle 사용할때 닫힘을 먼저 보여주려면?
본문
아래는 쿠키로 기억하는 slideToggle 인데요.
처음 보여줄때 열린 상태에서 시작하는데요.
이것을 닫힌 상태에서 시작하려면 어떻게해야 되나요?
도움 부탁 드립니다.ㅜㅜ
<style>
#billboardButton {
background-color:#f1f1f1;
background-image:url(<?=$g4['path']?>/images/close2.gif);
color:#666;
padding:0px;
width:1220px;
height:13px;
cursor:pointer;
text-align:center;
margin:0 auto;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
#billboardButton {
background-color:#f1f1f1;
background-image:url(<?=$g4['path']?>/images/close2.gif);
color:#666;
padding:0px;
width:1220px;
height:13px;
cursor:pointer;
text-align:center;
margin:0 auto;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
if($.cookie('billboardStatus')) {
var cook = $.cookie('billboardStatus');
} else {
var cook = $.cookie('billboardStatus', 'true', {expires: 1});
}
//var cook= $.cookie('billboardStatus');
if(cook=='false') {
$('#billboard').hide();
$("#billboardButton").css("background-image", "url(<?=$g4['path']?>/images/open2.gif)").text('');
} else {
$('#billboard').show();
$("#billboardButton").text('');
}
}
$('#billboardButton').on('click', function() {
$('#billboard').stop().slideToggle(300, function(){
$("#billboardButton").css("background-image", $(this).is(':not(:visible)') ? "url(<?=$g4['path']?>/images/open2.gif)" : "").text($(this).is(':visible') ? '' : '');
$.cookie('billboardStatus', $(this).is(':visible'), {expires:1});
});
});
}); // End document ready
</script>
<div id="test" style="width:1220px;margin:3px auto;">
<div id="billboardButton"></div>
<div id='billboard' style='width:1220px; height:190px;display:none;'>
</script>
<div id="test" style="width:1220px;margin:3px auto;">
<div id="billboardButton"></div>
<div id='billboard' style='width:1220px; height:190px;display:none;'>
내용
</div>
</div>
답변 4
#billboardButton {
..............
display: none; <----- 추가요
}
답변 감사 드립니다.
말씀하신대로 해봤는데, 안되는 것 같아요.ㅜㅜ
display: none; 을 추가 했더니, 버튼이 사라져 버렸어요.
이렇게 넣으라는 말씀이 맞으시죠?
<style>
#billboardButton {
background-color:#f1f1f1;
background-image:url(<?=$g4['path']?>/images/close2.gif);
color:#666;
padding:0px;
width:1220px;
height:13px;
cursor:pointer;
text-align:center;
margin:0 auto;
display: none;
}
</style>
어떻게 할 방법이 없을까요?
// $('#billboard').show();
슈와이님 답변 감사드립니다.
//$('#billboard').show(); 으로 해결은 되는데, 쿠키로 기억을 못하게 되어서요.
다른 방법은 없을까요?
제가 위에 넣은 저것이 눈에 않 보이게 하는 부분이구요
자체에 넣으시면 않되요....
지금보니 현재 글에 더보기 기능을 추가 하셨네요...^-^
네.ㅎ
사용한 slideToggle 소스 전부입니다.ㅎ
if(cook=='false') {
=> if(cook != 'true') {
슈와이님 답변 감사합니다.
if(cook != 'true') 로 하여도 안되는 것 같아요 ;;
아직 오픈 상태에 있어요.
답변을 작성하시기 전에 로그인 해주세요.