There is a chat header, and below there is a chat block where messages fly. Help to write a simple code, so that when you click on the icon-down icon, the chat block disappears, and the icon changes to icon-up. The main thing is to write where is what element to insert with icons, they are simply taken from font-awesome, I tried to download plugins, but there was no smooth appearance.

<div class="hidden"><i class="fa fa-angle-down" aria-hidden="true"></i></div> <section class = "message-block"></section>код
  • Pure js need? Without jQuery? - rugabarbo
  • ++ clean page and so hard. 900 lines html kodp - dmitriy zubkov

1 answer 1

I didn’t quite understand where exactly the chat looks like, but here’s an example with the smooth appearance and change of arrows from font-awesome

 var chatVisibility = true; function toggleChatVisibility() { var chatBlock = document.querySelector(".message-block"); var arrows = document.querySelector("#toggleArrows"); chatBlock.classList.toggle('message-block-hidden'); arrows.classList.toggle('fa-arrow-down'); } 
 .message-block { height: 200px; opacity: 1; background-color: #eee; transition: .3s ease all; } .message-block-hidden { height: 0px; opacity: 0; } .message-block-hidden>* { height: 0px; } 
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <button onClick="toggleChatVisibility()"> <i id="toggleArrows" class="fa fa-arrow-up" aria-hidden="true"></i> </button> <section class="message-block"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga suscipit rem sint officiis animi et architecto, a cupiditate esse, nulla.</p> </section>