Как открыть и закрыть div с помощью одной кнопки

Question

Я создаю всплывающую кнопку чата. Я хочу открывать и закрывать popup / div с помощью одной кнопки.

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

<div id="menu-popup">
    <ul>
        <li><a href="mailto:hello@covers.pk" id="menu-email">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/email.svg'; ?>">
        </a></li>   
        <li><a href="tel:+923038518000" id="menu-call">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/call.svg'; ?>">
        </a></li>   
        <li><a href="https://m.me/Printed.Mobile.Covers" id="menu-facebook">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/facebook.svg'; ?>">
        </a></li>
        <li><a href="https://wa.me/9203038518000" id="menu-whatsapp">
        <img src="<?php echo plugin_dir_url( __FILE__ ) . 'buttons/whatsapp.svg'; ?>">
        </a></li>
    </ul>
  </div>
</div>

Я хочу, чтобы всплывающее окно появлялось при нажатии кнопки. При повторном нажатии кнопки я хочу, чтобы она исчезла.

Answer 1

Самый простой способ сделать это - использовать метод JQuery toggle(). При использовании без параметров метод toggle() просто переключает видимость элементов:

$(function() {

  $("#menu-open").on("click", function() {
    $("#menu-popup").toggle();
  });

});