CODEWITHSUNDEEP
jquerycss
Epic
Epic

Reputation: 320

Slide div in / out with click

I have a content div that opens and closes as needed, but i cannot get the content div to slide in or out from the bottom. I tried using css but I think its fixed position is causing me grief. also by default it should be hiddin but it shows by default

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

.newcontent {
	display: block;
	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;
}
<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>

Upvotes: 1

Views: 132

Answers (1)

amit wadhwani
amit wadhwani

Reputation: 1140

Use this working code.

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

and below 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;
}

Upvotes: 2

Related Questions