const button = document.getElementById("hamburger");
const list = document.getElementById("list");
button.addEventListener("click", () => {
list.classList.toggle('show');
});
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
ul{
list-style-type: none;
}
.list{
list-style-type: none;
display: none;
}
.list.show{
position: fixed;
display: block;
inset: 0 0 0 0;
z-index: 99;
text-align: center;
background-color: hsl(0 0% 0% / 0.6);
padding: min(43vh, 20rem) 2rem;
}
header{
display: flex;
justify-content: space-between;
}
.hamburger{
width: 50px;
height: 50px;
background-color: red;
cursor: pointer;
position: absolute;
z-index: 999;
}
h1{
margin: 20rem 0;
}
.contents{
position: absolute;
left: 50%;
top: 120%;
transform: translate(-50%, -50%);
}
<header>
<div class="hamburger" id="hamburger"></div>
<ul class="list" id="list">
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>MENU</li>
</ul>
</header>
<div class="contents">
<h1 id="home">HOME</h1>
<h1 id="services">SERVICES</h1>
<h1 id="about">ABOUT</h1>
<h1 id="menu">MENU</h1>
</div>
I am trying to toggle off the eventlistener, when any of the navigation links are clicked. Once it scrolls to the link using the link reference in the html, I want the 'show' to toggle off, So its going to scroll to the link and toggle off the evebtlistener.
I've tried using the if else and some other html special class, Please can anyone help me solve this
Can you try adding a shared-class to the navigation items and then use document.querySelectorAll to add a click event listener to them? Something like -
<ul class="list" id="list">
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>MENU</li>
</ul>
And then -
const navItems = document.querySelectorAll('nav-item')
navItems.forEach((navItem) => {
navItem.addEventListener('click', () => {
list.classList.remove("show")
})
Related
I am using the onclick method for turning my navbar on/off the problem that I'm having is when I adjust my screen size to mobile view my nav auto turns on.
I'm not very good at JavaScript. I have just started learning it so just fiddled around and absolutely nothing worked for me. Someone told me to put aria-expanded on my HTML so also tried that:
function closeNav() {
document.getElementById("nav_bar").style.height = "0%";
document.getElementById("open-btn").style.display = "inline-block";
document.getElementById("close-btn").style.display = "none";
}
function openNav() {
document.getElementById("nav_bar").style.height = "100%";
document.getElementById("open-btn").style.display = "none";
document.getElementById("close-btn").style.display = "inline-block";
}
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav_bar {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: fixed;
top: 0;
width: 100%;
}
#nav_bar>img {
display: none;
}
.nav {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
.list-item {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
}
.list-item {
position: relative;
}
.list-item::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
.list-item:hover::before {
width: 100%;
}
.list-item:hover {
color: #C4C7C8;
}
#close-btn,
#open-btn {
display: none;
}
#media only screen and (max-width:768px) {
#nav_bar>img {
display: block;
position: absolute;
width: 10em;
left: 20%;
top: 10%;
}
#nav_bar {
width: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow: hidden;
transition: 0.5s;
}
.nav {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
top: 20%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.list-item {
text-decoration: none;
display: block;
color: #ffdada;
font-size: 1.5rem;
transition: 0.3s;
}
#close-btn,
#open-btn {
display: block;
position: absolute;
right: 25px;
top: 20px;
font-size: 2rem;
color: #818181;
transition: all 0.3s;
}
#close-btn:hover {
color: #fff;
}
<body>
<div id="nav_bar">
<a href="#" id="close-btn">
<i aria-expanded="false" onclick="closeNav()" class="bi bi-x-lg"></i>
</a>
<img src="assests/images/moon.png" alt="" />
<div class="nav">
<a class="list-item" href="#">Home</a>
<a class="list-item" href="#">About Me</a>
<a class="list-item" href="#">Projects</a>
<a class="list-item" href="#">C.V</a>
<a class="list-item" href="#">Contact</a>
</div>
</div>
<a aria-expanded="false" href="#" id="open-btn" onclick="openNav()"><i class="bi bi-list"></i
></a>
<script src="assests/nav.js"></script>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Make use of the classList.toggle function that adds/remove a class from the Navbar. In this example, I add or remove the class d-none that has the property: display: none in CSS. With that you can hide or show the navbar by pressing the same button with a single line of code:
const BUTTON = document.querySelector('#toggle_navBar');
const NAV = document.querySelector('nav');
BUTTON.addEventListener('click', function() {
NAV.classList.toggle('d-none');
});
body {
background: url(images/bg-img-01.jpg) no-repeat;
background-size: cover;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: radial-gradient( ellipse at top, rgba(196, 199, 200, 0.8), rgba(250, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0) 1%);
position: sticky;
top: 0;
width: 100%;
}
menu {
background: none;
overflow: hidden;
display: flex;
margin-inline: auto;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style: none;
width: 65%;
left: 20%;
padding: 1.4em;
}
nav li a {
text-decoration: none;
color: #CBD5DF;
font-weight: bolder;
position: relative;
}
nav li a::before {
position: absolute;
content: "";
background-color: #535792;
height: 4px;
width: 0%;
top: 25px;
transition: all .3s ease-in;
}
nav li a:hover::before {
width: 100%;
}
nav li a:hover {
color: #C4C7C8;
}
.d-none {
display: none;
}
<nav>
<img src="assests/images/moon.png" alt="" />
<menu>
<li><a class="list-item" href="#">Home</a></li>
<li><a class="list-item" href="#">About Me</a></li>
<li><a class="list-item" href="#">Projects</a></li>
<li><a class="list-item" href="#">C.V</a></li>
<li><a class="list-item" href="#">Contact</a></li>
</menu>
</nav>
<button id="toggle_navBar">Toggle NavBar</button>
A few changes I made were for semantic reasons. You should use semantic tags if possible and have accessibility in mind. Accessibility is also part of SEO-ratings!
I think the basic idea would be to have a button toggle some variable and then update the UI according to the value of that variable.
You can do this in several ways, but here is an example of a simple way to do it:
// Get your toggle button element
const toggle = document.querySelector(".nav-toggle");
// Get your nav element
const nav = document.querySelector(".nav");
// Create a variable to hold the state of your nav
let navIsOpen = false;
// Listen for clicks on your nav toggle button
toggle.addEventListener('click', () => {
// Update the nav state variable
navIsOpen = !navIsOpen;
// run a function that will update the nav "styles"
updateNav();
})
// This function will update the UI state according to the value of the navIsOpen variable. Here you can update all things you need, like your navbar, your toggle button, ...
function updateNav() {
navIsOpen
?
nav.classList.add('nav--is-open') :
nav.classList.remove('nav--is-open');
}
.nav {
margin-top: 1rem;
padding: 1rem;
background-color: lightgrey;
}
.nav--is-open {
background-color: purple;
color: white;
}
<button class="nav-toggle">Toggle nav</button>
<nav class="nav">
Your nav here
</nav>
Current setup (plain HTML/CSS):
I've currently got this plain HTML/CSS setup, which is basically using a checkbox with no opacity, with labels acting as buttons (which they in fact are not).
Codepen: https://codepen.io/MikaTheDesigner/pen/MWVYGoz
Video of my current HTML/CSS-demo (and the result goal): https://i.imgur.com/ha3NL0V.mp4
<div class="nav">
<input class="menuBtn" type="checkbox">
<label class="menuLabel open">Menu</label>
<label class="menuLabel close">Close</label>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav {
pointer-events: none;
position: fixed;
z-index: 100;
width: 100vw;
height: 100vh;
}
.nav > .menuBtn {
cursor: pointer;
width: 122.43px;
height: 122.43px;
margin: 0 0 0 3rem;
pointer-events: initial;
position: absolute;
z-index: 99;
opacity: 0;
}
.nav > .menuBtn:checked ~ .menuLabel.open {opacity: 0;}
.nav > .menuBtn:checked ~ .menuLabel.close {opacity: 100%;}
.nav > .menuBtn:checked ~ .menuBox.transitionBox {left: 100%;}
.nav > .menuBtn:checked ~ .menuBox.BG {left: 0;}
.nav > .menuLabel {
color: black;
font-size: 1.5rem;
position: absolute;
z-index: 98;
margin: 3rem 0 0 3rem;
text-align: center;
transition: all 0.2s ease-in-out;
}
.nav > .menuLabel.open {
text-shadow: 0 0 2rem rgba(0,0,0,.5);
width: 122.43px;
}
.nav > .menuLabel.close {
opacity: 0;
}
.nav > .menuBox.transitionBox {
background-color: black;
width: 200%;
height: 100%;
position: absolute;
z-index: 100;
left: -200%;
transition: all 2000ms;
}
.nav > .menuBox.BG {
background: linear-gradient(to bottom, white, black);
background-size: cover;
width: 100%;
height: 100%;
pointer-events: auto;
position: absolute;
z-index: 96;
left: -100%;
transition-delay: 500ms !important;
transition: all 200ms;
}
.nav > .menuBox.BG > nav {
position: absolute;
z-index: 97;
width: 100%;
height: 100%;
}
.nav > .menuBox.BG > nav > ul {
list-style: none;
padding: 122.43px 3rem 3rem calc(6rem + 122.43px);
}
.nav > .menuBox.BG > nav > ul li {
color: white;
font-size: 2rem;
line-height: 2rem;
margin-bottom: 1.5rem;
}
.nav > .menuBox.BG > nav > ul li > a {
color: inherit;
display: block;
text-decoration: none;
transition: all 0.2s ease-in-out;
width: max-content;
}
.nav > .menuBox.BG > nav > ul li > a:hover {cursor: pointer;}
Goal:
My goal is for the menu to act in the exact same way, when clicking the labels .menulabel.open and .menuLabel.close, but using javascript instead of plain HTML/CSS.
I would change these current labels to a-tags or p-tags and using onClick-functions, when I get the javascript working.
Like linked at the top of the thread, this is my goal, but using javascript to make it react, and not using a plain checkbox:
https://i.imgur.com/ha3NL0V.mp4
What have I tried so far?
Besides the plain HTML/CSS-solution I have tried setting up, which I wouldn't argue is the right way to make the menu, I have also tried setting this script up in my HTML-document, inwhich does not seem to work as I want it to:
function openNav() {
document.getElementsByClassName("menuTransition").style.left = "100%";
document.getElementsByClassName("menuBox").style.left = "0";
}
function closeNav() {
document.getElementsByClassName("menuTransition").style.left = "-200%";
document.getElementsByClassName("menuBox").style.left = "-100%";
}
(the javascript was supposed to just style the two elements when clicking on one of the a-tags the exact same way the CSS reacts, when checking the checkbox and "activating" the menu)
<div class="nav">
<a class="menuLabel open" onClick="openNav()">Menu</a>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<a class="menuLabel close" onClick="closeNav()">Close</a>
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
</div>
(basically the same HTML as above, just removing the labels and replacing them with a-tags)
You can use a single class and toggle that class on the click of a button, something like this:
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
document.getElementsByClassName("menuBox") return an array object .
you need to add the index , such as document.getElementsByClassName("menuBox")[0]
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 1 year ago.
i was trying to make a toggle button for tablets/phones but it isn't working. The javascript class gets called when i click the toggle button so i don't know what is wrong...
My head where i load my js using defer function to avoid placing it at the end of the body
<script defer src="assets/js/index.js"></script>
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
/*my toggle button propertys on desktops*/
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.header .nav .nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.nav-menu_visible {
left: 0;
}
}
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
I don't know why my menu isn't moving from left 0 to left 100% (it isn't showing :/)
It doesn't work because of CSS. Your specificity of nav-menu is much more as you have declared as.
.header .nav .nav-menu // 0 3 0
(x y x) => (id, class, tag)
Either you increase the specificity of .nav-menu_visible or decrease the specificity of .nav-menu
1) Decrease the specificity to 0 1 0 as
.nav-menu // 0 1 0
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
body {
background-color: black;
}
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.nav-menu_visible {
left: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
2) You can also increase the specificity to match with nav-menu as
.header .nav .nav-menu_visible { // 0 3 0
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});
body {
background-color: black;
}
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
#media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.header .nav .nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.header .nav .nav-menu_visible {
left: 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<header class="header">
<nav class="nav">
Portafolio
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
</header>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<button onclick="myFunction()">Portafolio</button>
<nav id="myDIV">
<ul class="nav-menu">
<li class="nav-menu-item">Inicio</li>
<li class="nav-menu-item">Sobre Mí</li>
<li class="nav-menu-item">Habilidades</li>
<li class="nav-menu-item">Conocimientos</li>
<li class="nav-menu-item">Proyectos</li>
<li class="nav-menu-item">Contacto</li>
</ul>
</nav>
I want to build a hamburger menu and I don't know why when I add position absolute to my UL(links-list) his background doesn`t show.It only shows the links and the border-bottom. I will post maybe someone will spot the issue.
Thank you in advance.
I will write here something because I need to have more words to post the question.
.header {
width: 100%;
display: block;
height: 0;
z-index: 1;
.header-content {
display: block;
.logo {
display: none;
}
.links-list {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin: 0;
width: 100%;
background: #505050;
height: 0;
.close {
display: block;
& a {
padding: 0 .5rem;
}
}
& li {
border-bottom: 1px solid #404040;
}
}
}
}
.open {
height: auto !important;
}
#burger-menu {
display: block;
height: 40px;
width: 100%;
background: url(/Core/img/burger.png)no-repeat 98% center;
background-size: 70px;
background-color: red;
}
<header class="header ">
<div class="container">
<div class="header-content">
<a href="#" id="burger-menu">
</a>
<img src="/Core/img/logo1.jpg" class="logo" alt="logo" />
<ul class="links-list">
<li class="close"><i class="fas fa-times"></i></li>
<li>Home</li>
<li>Bio</li>
<li>Training</li>
<li>Academy</li>
<li>Gallery</li>
<li>Store</li>
<li>Contact</li>
</ul>
<div class="overlay"></div>
</div>
</div>
</header>
It's because you have height: 0 on .links-list. When positioning elements absolutely, in most, if not all, cases you need to make sure the height has a positive value so the background has an area to draw on.
I have one page web app with 5 link's navigation and 5 sections. The structure is this:
<div class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Contact</li>
<li>P.S.</li>
</ul>
</div>
<div class="home-section">
<div class="home-section--greeting">
<p>Hi, I'm</p>
<p>T. Green</p>
</div>
</div>
<div class="about-section zoomOut">
</div>
<div class="skills-section zoomOut">
</div>
<div class="contact-section zoomOut">
</div>
<div class="ps-section zoomOut">
</div>
Every section is behind the home-section on page load. The sections are stacked on top of eachother with 100vh and position absolute. Also, every section EXCEPT the home-section has zoomOut class with transform: scale(0.8).
What I want to do is the following: when a link from the nav is clicked, I want the corresponding section to zoom-in and the active section to zoom-out, meaning the zoomOut class should be removed and the new section will slowly fade in (I will tackle the opacity and all animations, don't worry).
I want to do this in pure Javascript so, no jQuery/framework comments and pointers, please.
Also, I assembled a little jsfiddle so you could go to straight experimenting, if you may: https://jsfiddle.net/h7wturbf/1/
Thanks in advance!
Here is a plain javascript sample, using addEventListener, querySelector and querySelectorAll to catch and target links/sections
I added a zoomIn class to simplify how to toggle the sections
window.addEventListener('load', function() {
var links = document.querySelectorAll('.main-nav a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
var divtarget = e.target.href.split('#')[1];
document.querySelector('.zoomIn').classList.remove('zoomIn');
document.querySelector('.' + divtarget).classList.add('zoomIn');
})
}
})
html,
body {
height: 100%;
font-family: 'Yanone Kaffeesatz', sans-serif;
}
.zoomOut {
transform: scale(0);
}
.zoomIn {
transform: scale(0.8);
}
.home-section {
height: 100vh;
background-color: yellow;
}
.home-section .home-section--greeting {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 62px;
color: #005168;
}
.about-section {
position: absolute;
height: 100vh;
top: 0;
width: 100%;
background-color: dodgerblue;
}
.skills-section {
position: absolute;
height: 100vh;
top: 0;
width: 100%;
background-color: rebeccapurple;
}
.contact-section {
position: absolute;
height: 100vh;
top: 0;
width: 100%;
background-color: aqua;
}
.ps-section {
position: absolute;
height: 100vh;
top: 0;
width: 100%;
background-color: forestgreen;
}
.main-nav {
position: fixed;
top: 50%;
transform: translate(0, -50%);
font-size: 21px;
left: 0px;
z-index: 999;
}
.main-nav ul li {
margin: 8px 0 8px 0;
list-style-type: none;
}
.main-nav ul li a {
text-decoration: none;
color: #4F96AA;
transition: color 0.2s ease-in;
}
.main-nav ul li a:hover {
color: #65AABD;
}
.main-nav ul li a.about:active ~ #about-section {
display: none;
}
<div class="main-nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Skills
</li>
<li>Contact
</li>
<li>P.S.
</li>
</ul>
</div>
<div class="home-section zoomOut zoomIn">
<div class="home-section--greeting">
<p>Hi, I'm</p>
<p>T. Green</p>
</div>
</div>
<div class="about-section zoomOut">
</div>
<div class="skills-section zoomOut">
</div>
<div class="contact-section zoomOut">
</div>
<div class="ps-section zoomOut">
</div>
You should first bind onclick Event handler to those elements that can be clicked. Once the element is clicked, you could remove the class using :
this.classList.remove('class-name');