用滑動div輸入/輸出點擊

Question

我有一個內容div，根據需要打開和關閉，但我無法讓內容div滑入或滑出底部。我嘗試過使用CSS，但我認爲它的固定位置正在導致我的悲痛。默認情況下也應該hiddin但它顯示了默認

$(".livechat-button").click(function() { 
 
    $("#newpost").toggle(); 
 
});

.livechat-button { 
 
\t display: block; 
 
\t position: fixed; 
 
\t bottom: 0px; 
 
\t right: 0px; 
 
\t border-top: solid 1px #333333; 
 
\t border-left: solid 1px #333333; 
 
\t width: 180px; 
 
\t height: 50px; 
 
\t background-color: rgba(0,0,0,1.00); 
 
\t text-align: center; 
 
\t padding-top: 15px; 
 
\t color: #fff; 
 
\t cursor: pointer; 
 
} 
 

 
.newcontent { 
 
\t display: block; 
 
\t position: fixed; 
 
\t bottom: 0px; 
 
\t right: 0px; 
 
\t border-top: solid 1px #333333; 
 
\t border-left: solid 1px #333333; 
 
\t width: 300px; 
 
\t height: 450px; 
 
\t background-color: rgba(71,227,255,1.00); 
 
\t text-align: center; 
 
\t font-size: 13px; 
 
\t color: #000; 
 
\t padding-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="newpost" class="newcontent"> 
 
    Test Content 
 
</div> 
 

 
<div class="livechat-button">Open</div>

Answer 1

使用此工作代碼。

$(".livechat-button").click(function() { 
    $("#newpost").slideToggle(); 
}); 
}); 

及以下CSS

.newcontent { 
    display: none; 
    position: fixed; 
    bottom: 0px; 
    right: 0px; 
    border-top: solid 1px #333333; 
    border-left: solid 1px #333333; 
    width: 300px; 
    height: 450px; 
    background-color: rgba(71,227,255,1.00); 
    text-align: center; 
    font-size: 13px; 
    color: #000; 
    padding-top: 5px; 
}