JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/dark-hive/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div class="big-header">
  <ul>
    <li>
      <a href="#">Page 1</a>
    </li>
    <li>
      <a href="#">Page 2</a>
    </li>
    <li>
      <a href="#">Page 3</a>
    </li>
  </ul>
</div>
<div class="little-header">
   <ul> <!--  these are only the children of the parent site (page 1) above -->
    <li>
      <a href="#">Sub Page 1.1</a>
    </li>
    <li>
      <a href="#">Sub Page 1.2</a>
    </li>
    <li>
      <a href="#">Sub Page 3.3</a>
    </li>
  </ul>
</div>

JavaScript

var hide = localStorage[location] ? false : true;
var hidden = document.querySelector('.little-header');
if(hide) {
    hidden.style.display = 'none';
    document.onclick = function() {
        localStorage[location] = true;
        hidden.style.display = '';
        document.onclick = '';
        console.log('click');
    }
}