Открыть и закрыть всплывающее окно div кнопки чата

Question

Я создаю чат-пузырь для кнопок веб-сайта и мобильных пользователей. Я создал HTML-код.

<div class="devsol-chat">

    <a href="javascript:void(0);" class="float" id="menu-open">
    <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/chat.svg'; ?>">
    </a> 

    <a href="javascript:void(0);" class="float" id="menu-close">
    <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/close.svg'; ?>">
    </a>            

    <ul>    
        <li><a href="https://m.me/kidsfitter" id="menu-facebook">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/facebook.svg'; ?>">
        </a></li>
        <li><a href="https://wa.me/923038513000" id="menu-whatsapp">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/whatsapp.svg'; ?>">
        </a></li>
    </ul>
</div>

Я хочу, чтобы когда пользователь нажимал кнопку чата, он всплывал с кнопками whatsapp и facebook, а также появлялись кнопки закрытия. Как и в этих примерах

, и когда пользователь щелкает по нему, появляется кнопка закрытия

. Я хочу использовать jquery или JavaScript, чтобы сделать его функциональным. Кто-нибудь, пожалуйста, помогите

Answer 1

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

Хорошо, так. У вас есть 4 кнопки.

Открыть чат Закрыть чат Facebook WhatsApp

По умолчанию Facebook и WhatsApp скрыты, что составляет display: none.

Когда вы нажимаете Открыть чат , тогда Facebook и WhatsApp должны быть видны, что display: block

Когда вынажмите Закрыть чат кнопку, они должны быть снова скрыты, что является display: none

Таким образом, проанализировав эту информацию, мы поняли, что нам нужно обнаружить, нажмите Открыть чат или Закрыть чат с помощью javascript, и после того, как мы его обнаружим, нам нужно получить элементы, которые нам нужно показать или скрыть, и соответственно установить их CSS.

$('button').on('click', function() {
  //do something here
})

Эта функция - все, что вам нужно дляодна кнопка для работы. Взгляните на это . Это поможет вам с CSS. Вернитесь сюда с некоторым кодом, чтобы мы могли его обработать:)

Счастливое кодирование

РЕДАКТИРОВАТЬ

Подход с display: block и display: noneпроще всегоЕсть и другие способы сделать это, если вы хотите анимацию и прочее, но вы поймете это сами после того, как сделаете это. Поверь мне:)