クリックして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; 
}