Javascript-форум - блоки сообщений как в вк

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - блоки сообщений как в вк (https://javascript.ru/forum/dom-window/73909-bloki-soobshhenijj-kak-v-vk.html)

блоки сообщений как в вк

я сделал такую вот небольшую ленту с двумя пользователями: html

<div class="msg_block">
       <div class="users_msg_block">
            <a data-triger="user1" class="new_msg_user"><img src="/images/icons/users/consultation.png" alt="" title="" /></a>
            <a data-triger="user2" class="new_msg_user"><img src="/images/icons/users/consultation.png" alt="" title="" /></a>
       </div>
       <div class="msg_bnt_active">
            <a><i class="fa fa-comments-o"></i></a>
       </div>
</div>

теперь вопрос в том как сделать чтоб при клике на юзера открывался блок диалога с этим юзером, а при нажатии на msg_bnt_active показывался и скрывался список этих пользователей.

блок который будет открываться и закрываться вот:

<div class="msg_box">
                <div class="msg_box_header">
                    <div><h5>User 1</h5></div>
                    <div><a><i class="fa fa-times"></i></a></div>
                </div>
                <div class="msg_box_wrapper">
                dialog...
                </div>
                <div class="msg_box_footer">
                <input type="text" name="send_message" />
                </div>
            </div>

для каждого пользователя должен открываться свой блок с диалогом

а где этот блок диалога?

например вот

<div class="msg_box">
                <div class="msg_box_header">
                    <div><h5>User 1</h5></div>
                    <div><a><i class="fa fa-times"></i></a></div>
                </div>
                <div class="msg_box_wrapper">
                dialog...
                </div>
                <div class="msg_box_footer">
                <input type="text" name="send_message" />
                </div>
            </div>

:write: очередная "открывашка" :(

уважаемый Профессор, именно да, именно так, именно

Цитата:

очередная "открывашка"

если Вы действительно Профессор и Вам не сложно то помогите с вопросом! спасибо

kiberchainik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .hide {
       display: none;
   }

  </style>

  <script>
 document.addEventListener('DOMContentLoaded', function() {
 function show(elem) {
        return function(event) {
    event.preventDefault();
    elem.classList.toggle("hide")
  }
     };
 var a = document.querySelectorAll('[data-triger]'), b = document.querySelectorAll('.msg_box');
 [].forEach.call(a, function(node, i) {
    node.addEventListener("click", show(b[i]))
 });
var elem = document.querySelector(".users_msg_block");
document.querySelector(".msg_bnt_active").addEventListener("click", show(elem))

 });
</script>
</head>

<body>
<div class="msg_block">
       <div class="users_msg_block">
            <a data-triger="user1" class="new_msg_user"><img src="/images/icons/users/consultation.png" alt="" title="" /></a>
            <a data-triger="user2" class="new_msg_user"><img src="/images/icons/users/consultation.png" alt="" title="" /></a>
       </div>
       <div class="msg_bnt_active">
            <a><i class="fa fa-comments-o">user</i></a>
       </div>
</div>
<div class="msg_box">
                <div class="msg_box_header">
                    <div><h5>User 1</h5></div>
                    <div><a><i class="fa fa-times"></i></a></div>
                </div>
                <div class="msg_box_wrapper">
                dialog...
                </div>
                <div class="msg_box_footer">
                <input type="text" name="send_message" />
                </div>
            </div>
<div class="msg_box">
                <div class="msg_box_header">
                    <div><h5>User 2</h5></div>
                    <div><a><i class="fa fa-times"></i></a></div>
                </div>
                <div class="msg_box_wrapper">
                dialog...
                </div>
                <div class="msg_box_footer">
                <input type="text" name="send_message" />
                </div>
            </div>

</body>
</html>