Why doesn't this click function work?

Question

Currently I am making a navbar that when one of its items are clicked it will reveal the header or a another menu that I made.

Here is the HTML code:

<header id="nav" class="navbar">
    <nav class="primary clearfix">
        <h1>
            <a href="../index.html" class="logo hide-text">Logo</a>
        </h1>
        <div class="right-align">
            <a href="#" class="collectionsClick" role="button">Collections</a>
            <a href="about.html">About Us</a>
            <a href="contact.html">Contact</a>
        </div>
    </nav>
</header>
<header id="subnav" class="navbar" style="visibility:visible;">
    <nav id="collection-nav" class="primary-collection clearfix" style="display:none;">
        <a href="#">
            <div class="collection-background" style="background-image: url(../img/CCN-088-0425.png)"></div>
            <div class="collectionNavWrap">
                <h3 class="subnavHead">Categories</h3>
                <span role="article" class="caption">View All Categories</span>
            </div>
        </a>
    </nav>
</header>

Here is the CSS code:

.navbar#subnav {
    visibility: visible;
}
#subnav #collection-nav.primary-collection {
    display: block;
    background-color: #000000;
    padding: 70px 0 0;
    position: absolute;
    width: 100%;
    z-index: 100;
    transition: top 200ms ease;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}
.reveal {
    top: 0;
    transition: top 200ms ease;
}

#collection-nav.primary-collection a {
    width: 100%;
    height: 100px;
    display: block;
    pointer-events: all;
    opacity: 1;
    color: #ffffff;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 300;
    position: relative;
}
#collection-nav .collection-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: no-repeat 90% 0;
    background-size: 40%;
    opacity: .8;
    transition: 200ms ease;
}
#collection-nav a:hover > .collection-background {
    opacity: 1;
    transition: 200ms ease;
}
#collection-nav .collectionNavWrap {
    height: 100%;
    width: 100%;
    padding: 35px 10px;
    position: relative;

}
#collection-nav .collectionNavWrap .subnavHead {
    display: inline-block;
    margin: 0;
}
#collection-nav .collectionNavWrap span.caption {
    float: right;
}

And finally this is the jQuery Code that I made:

$('div.right-align a.collectionsClick').click(function() {
    $('.primary-collection').css('display', 'block');
});

After I made this, I tried to change the display to block through a click on the "Collections" item in the first navbar. But for some reason the css does not want to change. I've also tried adding it through the ".reveal" class, but it still does the same thing and does not want to add the class ".reveal". I've tried using the ".on('click', function(){});" in jQuery and the result is still the same.

Does anyone know how to fix this?