tab menu that drops/toggles (pure css/html) - css

Question

I have a tab that sits at the bottom of a global nav.
I want that tab to expand and contract on click preferably not using jquery.
When the tab expands it will contain a list with links vertically and the tab should stick to the bottom of the expanded list.
I've looked many places online to find something similar but have not been able to locate what I'm looking to achieve.
Mobile friendly would be nice and needs to toggle when clicked outside the region.
Here is the css for the tab.
.findprod {
position: absolute;
top: 11.5vw;
background-color:rgba(0, 0, 0, 0.5);
text-decoration: none;
text-align:center;
right:7vw;
top-padding:-.7vw;
margin:-.7vw;
width:10.75vw;
font-family: Lato;
color: white;
font-size: .88vw;
font-weight: 400;
line-height: 3.1vw;
border: none;
-webkit-border-radius: 0 1px 22px 22px;
border-radius: 0 1px 22px 22px;
white-space: nowrap;
overflow: hidden;
z-index:1;
}
html: <div class="findprod"> Find a Product </div>

Answer 1

Here is a simple example of how to do this with jQuery.
See: https://jsfiddle.net/552xrcf3/
$('.findprod').click(showHide);
function showHide(){
$('#list').slideToggle();
}
.findprod {
background-color:rgba(0, 0, 0, 0.5);
text-align:center;
color: white;
font-family: sans-serif;
display: inline-block;
padding: 20px 30px;
border-radius: 0 0 40px 40px;
cursor: pointer;
}
#list{
display: none;
list-style-type: none;
font-family: sans-serif;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>Rocks</li>
<li>Pipes</li>
<li>Cookies</li>
<li>Office Supplies</li>
<li>Fireworks</li>
</ul>
<div class="findprod"> Find a Product</div>