I am facing a challenge with an invisible div that I need to make visible upon clicking an element. However, my current approach does not seem to be working. Can you help me figure out what I am missing?
I attempted to target <a class=".demo"> using jQuery and the click function to add the class .open to <div class="demo-div"> in order to make it visible.
$(".demo").click(function() {
$(".demo-div").addClass("open");
});
$(".demo").click(function() {
$(".demo-div").removeClass("open");
});.demo-div {
background: #3AB0E0;
color: #18191D;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 3.75rem;
z-index: 99;
opacity: 0;
visibility: hidden;
overflow-x: hidden;
overflow-y: hidden;
transform: tranlateY(-100%);
transition: all 0.5s ease-in-out;
}
.demo-div.open {
opacity: 1;
z-index: 99;
visibility: visible;
transform: translateY(0);
transition: all 0.5s ease-in-out;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul>
<li><a href="javascript:void(0);" class="demo">click here</a></li>
</ul>
</nav>
<div class="demo-div"></div>Despite my efforts, the class open is not being added to demo-div
If the class demo-div is removed, the div becomes visible
opacity: 0;
visibility: hidden;
***Update I realized my mistake - when adding the new class, it should include a closing button such as .demo-close-btn
$(".demo").click(function() {
$(".demo-div").addClass("open");
});
$(".demo-close-btn").click(function() {
$(".demo-div").removeClass("open");
});