Splitting open background image to reveal menu

Question

I am trying to create a menu like https://squareup.com/shop

When you press one of the nav tabs ( 'products' 'business types' 'resources' ) the hero image slides open to reveal a menu.

I think I'm on the right track but am getting stuck with some logic/jquery. I also feel like I'm missing something.

HTML

<header>
    <div class="menu" style="background-image: url(my-background-image.jpg);">
        <a class="click-me">
           menu item
        </a>
        <div class="hidden">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#">nav1</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
            </ul>
        </div> <!-- end hidden -->
    </div> <!-- end menu -->
    <div class="banner" style="background-image: url(my-background-image.jpg);"> <!-- SAME IMAGE AS MENU BG IMAGE -->
    </div>
</header>

CSS

.menu {
    background-position: top;
    background-size: 100% auto;
    height:100px;

}

.hidden-content {
  display: none;
}

.banner {
    background-size: 100% auto;
    padding-bottom: 42%;
    background-repeat: no-repeat;
    background-position: 0 -100px;
}

JQUERY

<script>
    $(document).ready(function(){
        $(".click-me").click(function () {
        $(".hidden").slideDown();
        });
    );
</script>

Many thanks in advance.

Answer 1

Close the div#menu before the div.hidden I used instead of a image color so you can check how it works

$(".click-me").click(function() {
    $(".hidden").slideDown();
    //If you use the toggle() function, you can show and hide you hidden class on every click
    // $(".hidden").toggle();
});

.menu {
    background-color: red;
    background-position: top;
    background-size: 100% auto;
    height: 100px;
}

.hidden {
    display: none;
}

.banner {
    background-color: blue;
    background-size: 100% auto;
    padding-bottom: 42%;
    background-repeat: no-repeat;
    background-position: 0 -100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <div class="menu">
        <a class="click-me">
           menu item
        </a>
    </div>
    <div id="hidden" class="hidden">
        <ul class="nav nav-tabs nav-stacked">
            <li class="active"><a href="#">nav1</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </div>
    <!-- end hidden -->
    <div class="banner">
        <!-- SAME IMAGE AS MENU BG IMAGE -->
    </div>
</header>