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>

CSS

.big-header {
}
.little-header {
    display:none;

}

JavaScript

$(function () {
    var showLittleHeader = localStorage.getItem('show_little_header');
    if (showLittleHeader) {
        $('.little-header').show();
    }
    $('.big-header').on('click', 'a', function () {
        localStorage.setItem('show_little_header', 1);
        $('.little-header').show();
    });

});