I've been puzzling over this issue for hours now. The intention of this code is to display a div, but it's just not cooperating.
<div id="butbr">
<div id="sup_nav">
<div id="stup" class="bxt1"></div>
<div id="exep" class="bxt1"></div>
<div id="trat" class="bxt1"></div>
<div id="tstm" class="bxt2"></div>
<div id="whys" class="bxt3"></div>
<div id="regu" class="bxt3"></div>
</div>
<a id="btn_sup" href="">
<div id="top_nav">
<img src="../images/logos/mcwb.png" alt="">
</div>
</a>
</div>
I suspect the error may be in the JavaScript below, however, there are no errors appearing in the console:
$(document).ready(function() {
$("#btn_sup").click(function(event) {
$("#sup_nav").show();
});
});
Cascading Style Sheets (CSS):
#butbr {
background-color: #FFF;
max-width: 80%;
margin-left: auto;
margin-right: auto;
min-width: 200px;
height: auto;
border-radius: 0 0 5px 5px;
/*box-shadow: 0px 3px 12px rgba(50, 50, 50, 0.58);*/
box-shadow:0px 2px 2px rgba(50, 50, 50, 0.3);
}
#btn_sup {
width: 100%;
height: 60px;
display: block;
z-index: 5;
}
#sup_nav {
width: 75%;
height: 525px;
display: none;
}