<div class="messagengers">
  <div class="messagengers__wrap">
    <div class="messagengers__hide">
        <a class="messagengers__link">
          <img class="messagengers__logo" src="/assets/images/m_youtube.svg" alt="" role="presentation"/>
          <img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
        </a>
        <a class="messagengers__link">
          <img class="messagengers__logo" src="/assets/images/m_instagram.svg" alt="" role="presentation"/>
          <img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
        </a>
        <a class="messagengers__link">
          <img class="messagengers__logo" src="/assets/images/m_facebook.svg" alt="" role="presentation"/>
          <img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
        </a>
        <a class="messagengers__link">
          <img class="messagengers__logo" src="/assets/images/m_chat.svg" alt="" role="presentation"/>
          <img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
        </a>
        <a class="messagengers__link">
          <img class="messagengers__logo" src="/assets/images/m_youtube.svg" alt="" role="presentation"/>
          <img class="messagengers__close" src="/assets/images/m_close.svg" alt="" role="presentation"/>
        </a>
    </div>
    <a class="messagengers__phone"><img src="/assets/images/m_phone.svg" alt=""></a>
  </div> 

.messagengers {
  cursor: pointer;
  position: absolute;
  bottom: -60px;
  right: 60px;

  &.active {
    .messagengers__hide {
      display: flex;
    }
  }
  &:hover {
    .messagengers__link {
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.21);
    }
  }
  &__wrap {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }
  &__phone {
    margin-top: 8px;
  }
  &__hide {
    display: none;
    flex-direction: column;
  }
  &__link {
    border-radius: 30px;
    margin-bottom: 12px;
    &.closed {
      .messagengers__logo {
        display: none;
      }
      .messagengers__close {
        display: block;
      }
    }
  }
  &__close {
    display: none;
  }
}

$('.messagengers__phone').click(function () {
  $('.messagengers').addClass('active');
});

$('.messagengers__link').click(function () {
  $('.messagengers__link').removeClass('closed');
  $(this).addClass('closed');
});