HTML
.chat-box { font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif; color:#333; width:200px; /* Chatbox width */ border:1px solid #344150; border-bottom:none; background-color:white; position:fixed; right:10px; bottom:0; z-index:9999; -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2); -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2); box-shadow:1px 1px 5px rgba(0,0,0,.2); } .chat-box > input[type="checkbox"] { display:block; margin:0 0; padding:0 0; position:absolute; top:0; right:0; left:0; width:100%; height:26px; z-index:4; cursor:pointer; opacity:0; filter:alpha(opacity=0); } .chat-box > label { display:block; height:24px; line-height:24px; background-color:#344150; color:white; font-weight:bold; padding:0 1em 1px; } .chat-box > label:before {content:attr(data-collapsed)} .chat-box .chat-box-content { /* padding:10px; */ display:none; } /* hover state */ .chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A} /* checked state */ .chat-box > input[type="checkbox"]:checked + label {background-color:#212A35} .chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)} .chat-box > input[type="checkbox"]:checked .chat-box-content {display:block}HTML
<div class="chat-box"> <input type="checkbox"> <label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label> <div class="chat-box-content"> <!-- Kode buku tamu dsb... --> </div> </div>