How can I add a class to div when clicking on list item?

Question

When a user clicks on the below list item element:

<li class="menu-item-473" id="wp_nav_menu-item-473"></li>

I want to add the class 'active' to the below element:

<div id="gldbm-panel" class="gldbm-panel">

Whilst keeping the original 'gldbm-panel' class so it appears like this.

<div id="gldbm-panel" class="gldbm-panel active">

Tried the below solutions to no avail. Any ideas?

My Unsuccessful Vanilla Solution:

document.addEventListener("DOMContentLoaded", function() {
  var faqContainers = document.getElementsByClassName('menu-item-473');
  var faqToggle = document.getElementsByClassName('gldbm-panel')[0];
  for (var i = 0; i < faqContainers.length; i++) {

    faqContainers[i].addEventListener('click', function() {

      if (faqToggle.classList.contains('active')) {
        faqToggle.classList.remove('active');
      } else {
        faqToggle.classList.add('active');
      }

    });
  }


});

My Unsuccessful JQuery Solution(s):

$(document).ready(function(){
   $(document).on('click','#menu-item-473',function(){
      $(document).find('.gldbm-panel').addClass('visible');
   });
});

AND

$('.menu-item-473').click( function() {
    $("#gldbm-panel").toggleClass("active");
} );

AND

jQuery(document).ready(function() {
    jQuery('.menu-item-473').click(function(){
         jQuery('#gldbm-panel').toggleClass('active');
    });
});

AND

$("#menu-item-473").click(function(){
  $("#gldbm-panel).addClass("active")
})

Answer 1

You need to use 'div' correct id to bind the event. You have used classname with #. either use '.className' or '#id'. On most of your trial, you have syntax error.

 $("#wp_nav_menu-item-473").on('click',function(){ $('#gldbm-panel').addClass('visible'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="menu-item-473" id="wp_nav_menu-item-473">hello</li> </ul> <div id="gldbm-panel" class="gldbm-panel">

Answer 2

A simple JS solution, get both elements correct by id or class ( i used querySelector for the class, preference) but it's up to you. Then wrap a simple toggle function via event listener for whenever you click in the li tag.

function toggleClass() {
  if (divElement.classList.contains('active')) divElement.classList.remove('active')
  else divElement.classList.add('active')
}

let liElement = document.querySelector('.menu-item-473')
let divElement = document.querySelector('.gldbm-panel')

liElement.addEventListener('click', toggleClass);