HTML/CSS Panel icon shows panel but doesn't close it

Question

Ive created a panel using HTML and CSS only. I want this panel to be on the bottom div of the screen and when you tap the image (that I used to replace the default text) the panel rises from the bottom. I've got that down for the most part, however, as I am rather new to panels I can't figure out how to use the same image to close the panel as well.

I'm not against using javascript or jQuery, but im just learning those two, so my skills are not quite as good as all of yours!

Here is my HTML and my CSS

<nav id="nav" role="navigation">


<ul>

    <li>
        <a class="findMe" href="#" aria-haspopup="true"><img  
src="assets/whiteGearIcon.png" /></a>
        <ul>
            <li ><a href="#"><img class="theDudeAbides" 
src="assets/tools/timerIcon.png" /></a></li>
            <li><a href="#"><img class="obviouslyYoureNotAGolfer" 
src="assets/tools/flashIcon.png" /></a></li>

        </ul>
    </li>

</ul>
</nav>

nav
{
/* container */
}
#nav > a
{
    display: none;

}
#nav li
{
    position: relative;
}

/* first level */

#nav > ul
{
    height: 3.75em;
}
    #nav > ul > li
    {
        width: 25%;
        height: 100%;
        float: left;
    }

/* second level */

#nav li ul
{
    display: none;
    padding: 0;
    float: right !important;
    position: relative;
    background-color: grey;
    width: 65%;
    height: 35%;
}
    #nav li:hover ul
    {
        display: block;
    }

.findMe img{
position: absolute;
left: 300%;
top: 50%;
width: 45%;
}

Thank you for your time.