Jquery переключение боковой панели с 2 кнопками

Question

Я пытаюсь создать переключатель на боковой панели, чтобы кнопка переключения открывала боковую панель. Это прекрасно работает на рабочем столе, однако, если я использую мобильный, кнопка переключения скрыта. Можно ли добавить кнопку закрытия на боковой панели, которая может закрыть боковую панель, не нарушая сценарий? У меня есть скрипт:

<div id="sidebar">content</div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>

<script>
jQuery(document).ready(function() {
    jQuery("#filter-icon").click(function() {
        jQuery("#filterswitch").toggleClass('active');
        jQuery("#sidebar").toggleClass('show-sidebar');
    });
});
</script>

Answer 1

Да, это возможно, просто добавьте еще один div на боковой панели, например так:

<div id="sidebar">
  content
  <div class="filterswitch"></div>
</div>
<div id="filter-icon">
  Refine Selection
  <div class="filterswitch"></div>
</div>

Если вы включите переключатель фильтров классов в оба элемента jQuery, они автоматически будут прослушивать щелчки на обоих элементах.

Answer 2

Не должно быть проблемой, вы пробовали что-то подобное?

<div id="sidebar"><button id="closeSidebar">Close</button></div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>

<script>
    const toggleSidebarAndSwitch = () => {
      jQuery("#filterswitch").toggleClass('active');
      jQuery("#sidebar").toggleClass('show-sidebar');
    }

    jQuery(document).ready(() => {
        jQuery("#filter-icon").click(() => {
          toggleSidebarAndSwitch()
        });
        jQuery("#closeSidebar").click(()=>{
          toggleSidebarAndSwitch()  
        })
    });
    </script>