user2986042 user2986042 - 2 months ago 12
CSS Question

Why slideToggle is going downwards and out of the screen?

I am writing some code to toggle a

div
class. I want to slide down the
div
up to the bottom of the page and slide up when clicked again.

My HTML code contains:

<div class="chat-sidebar">

<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>

<div class="chat_body">
<div class="sidebar-name" ></div>
</div>

</div>


and the
CSS
for this HTML :

.chat-sidebar{

width: 200px;
position: fixed;
height: 370px;;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius:5px 5px 0px 0px;
}
.sidebar-name{
padding-left: 10px;
padding-right: 10px;
margin-top : 0.8cm;
font-size: 20px;
}
.chat_head{
background:#f39c12;
color:white;
padding:2px;
font-weight:bold;
cursor:pointer;
border-radius:5px 5px 0px 0px;
margin-top: -10px;
}


and now I am sliding the main
chat-sidebar
DIV using jQuery function like :

$(document).ready(function() {

$('.chat_head').click(function(){
$('.chat-sidebar').slideToggle('slow');
});


});


slideToggle
is working fine when click the
.chat_head
div. But it is going down too far so that it is not visible anymore (out of the screen). What am I missing here?

Answer

You need to slideToggle the .chat_body instead of the whole wrapper div. So just remove the height from .chat-sidebar and move it to .chat_body. Now apply the slideToggle() function on .chat_body:

$(document).ready(function() {
  $('.chat_head').click(function() {
    $('.chat_body').slideToggle('slow');
  });
});
.chat-sidebar {
  width: 200px;
  position: fixed;
  right: 10px;
  bottom: 0px !important;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid rgba(29, 49, 91, .3);
  border-radius: 5px 5px 0px 0px;
}
.sidebar-name {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 1px;
  font-size: 20px;
}
.chat_head {
  background: #f39c12;
  color: white;
  padding: 2px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px 5px 0px 0px;
  margin-top: -10px;
}
.chat_body {
  height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-sidebar">
  <div class="chat_head">
    <h4 align="center"><b>Online Users</b></h4> 
  </div>
  <div class="chat_body">
    <div class="sidebar-name"></div>
  </div>
</div>

Comments