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

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

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

css:

.msg_block {
background-color: #ffab3b;
position: fixed;
bottom: 10px;
left: 10px;
z-index: 9999999;
width: 50px;
border-radius: 30px;
}
.users_msg_block {
    display: inline-grid;
    margin-bottom: 10px;
}
.new_msg_user {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #fe980f;
    border: 1px solid #ffab3b;
    padding: 9px;
    color: white;
    margin-bottom: 5px;
}
.msg_bnt_active {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #fe980f;
    border: 1px solid #ffab3b;
}
.msg_bnt_active a {
    color: white;
    padding: 10px;
    font-size: 30px;
}

теперь вопрос в том как сделать чтоб при клике на юзера открывался блок диалога с этим юзером, а при нажатии на 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>

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