JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
  <div class="locationMenuDropdown">
    <h3>Choose a Location</h3>
    <div class="locationButtons">
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Kettering</div>
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Northampton</div>
      <div class="et_pb_button"><i class="fas fa-map-marker-alt"></i> Wellingborough</div>
    </div>
  </div>

  <div id="locationMenu"><h4 class="locationLink"><i class="fas fa-map-marker-alt"></i> Locations</h4>
  </div>

CSS

.locationMenuDropdown{
  display: none
}

JavaScript

const locationLink = document.getElementsByClassName('locationLink')[0];

locationLink.addEventListener('click', () => {
var element = document.getElementsByClassName('locationMenuDropdown')[0];
if (element.style.display == "none") {
console.log("show");
element.style.display = 'block';
}else {
element.style.display = 'none';
console.log("hide");
}
});