title: Javascript add class to next element when nested child element is clicked
body: <p>I have a menu structure where the Submenu that is hidden is not a child of the menu item. I have a span element inside the main top level link that will serve as an arrow to signify a submenu on mobile. When the user touches the span element I need the dropdown menu to have a class added (Javascript not using jQuery) in order to show it.</p>
  
  <p>Something like this (Note that this is not how I would structure my menu, this is code already on a site that I cannot change)</p>
  
  <pre><code>&lt;a href="#"&gt;Top Level Menu Item #1
  &lt;span&gt;⇩&lt;/span&gt;
  &lt;/a&gt;
  &lt;div class="dropdown-menu"&gt;Dropdown Menu Here&lt;/div&gt;
  
  &lt;a href="#"&gt;Top Level Menu Item #2
  &lt;span&gt;⇩&lt;/span&gt;
  &lt;/a&gt;
  &lt;div class="dropdown-menu"&gt;Dropdown Menu Here&lt;/div&gt;
  
  &lt;a href="#"&gt;Top Level Menu Item #3
  &lt;span&gt;⇩&lt;/span&gt;
  &lt;/a&gt;
  &lt;div class="dropdown-menu"&gt;Dropdown Menu Here&lt;/div&gt;
  </code></pre>
  
  <p>So when span is touched or clicked, .dropdown-menu will have a class added to it.</p>