I have a collapse link inside a menu and the sub menus comes down on clicking the link, but if the page is refreshed , it closes by itself. I don't know how to implement the local storage for this. Please help me. Thank you for your time. I have added my current code below.
Code:
const linkCollapse = document.getElementsByClassName('collapse__link')
var i
for (i = 0; i < linkCollapse.length; i++) {
linkCollapse[i].addEventListener('click', function() {
const collapseMenu = this.nextElementSibling
collapseMenu.classList.toggle('showCollapse')
const rotate = collapseMenu.previousElementSibling
rotate.classList.toggle('rotate')
})
}<body id="body-pd">
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon name="menu-outline" class="nav__toggle" id="nav-toggle"></ion-icon>
<!-- <a href="#" class="nav__logo"><img src="images/smartmine1.png" height="80" width="90" style="margin-right: 40px;"></a> -->
<a href="#" class="nav__logo"><img src="images/smartmine.png" height="60" width="175" style="margin-right: 40px;"></a>
</div>
<div class="nav__list">
<a href="Dashboard.php" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Dashboard</span>
</a>
<div class="nav__link collapse">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Equipment</span>
<ion-icon name="chevron-down-outline" class="collapse__link"></ion-icon>
<ul class="collapse__menu">
<ion-icon class="icon3"name="contrast-outline"></ion-icon> <a href="lights.php" class="collapse__sublink">Lighting Plant</a> <br>
<ion-icon class ="icon3"name="videocam-outline"></ion-icon> <a href="" class="collapse__sublink">IP Cameras</a><br>
<!-- <ion-icon class="icon3" name="water-outline"></ion-icon> <a href="" class="collapse__sublink">Pumping Stations</a> -->
</ul>
</div>
<a href="Analytics.php" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Analytics</span>
</a>
</div>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>