이전 목록 다음
미채택 완료

slideToggle 사용할때 닫힘을 먼저 보여주려면?

2014-01-04 (토) 02:03:37 8,266
아래는 쿠키로 기억하는 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(){

    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;'>
내용
</div>

답변 4개 / 댓글 4개

if(cook=='false') {
=> if(cook != 'true') {

답변에 대한 댓글 1개

슈와이님 답변 감사합니다.
if(cook != 'true') 로 하여도 안되는 것 같아요 ;;
아직 오픈 상태에 있어요.
2014-01-04 (토) 13:54:22
제가 위에 넣은 저것이 눈에 않 보이게 하는 부분이구요
자체에 넣으시면 않되요....

지금보니 현재 글에 더보기 기능을 추가 하셨네요...^-^

답변에 대한 댓글 1개

네.ㅎ
사용한 slideToggle 소스 전부입니다.ㅎ
// $('#billboard').show(); 

답변에 대한 댓글 1개

슈와이님 답변 감사드립니다.
//$('#billboard').show(); 으로 해결은 되는데, 쿠키로 기억을 못하게 되어서요.
다른 방법은 없을까요?
2014-01-04 (토) 04:10:53
#billboardButton {
    ..............
    display: none;    <----- 추가요
}

답변에 대한 댓글 1개

답변 감사 드립니다.
말씀하신대로 해봤는데, 안되는 것 같아요.ㅜㅜ
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>
어떻게 할 방법이 없을까요?

답변을 작성하려면 로그인이 필요합니다.