i want to change display of an element to none when the user open my website menu i used on click event and changed the display by DOM but i want to make the display unchanged when the user close the menu what should i do?
}
function removeSearch(){
document.getElementById("search-id").style.display = "none";
}<button type = "button" onclick="removeSearch()" class = "navbar-toggler">Here's an example where you can keep track of the menu state and toggle the element you want to show and hide by it's data attribute.
const menuToggle = document.querySelector('.menu_toggle');
const menu = document.querySelector('.menu');
const someElement = document.querySelector('.some_element');
menuToggle.addEventListener('click',e=>{
if(menu.dataset.state==='closed'){
menu.dataset.state='opened'
someElement.dataset.state='closed'
}else{
menu.dataset.state='closed'
someElement.dataset.state='opened'
}
}).menu{
background: rgb(152, 152, 233);
}
[data-state="closed"]{
display: none;
}
.some_element{
background: rgb(36, 36, 36);
color: white;
padding: 2em;
}<button class="menu_toggle">Toggle Menu</button>
<div class="menu" data-state="closed">
<h2>Menu</h2>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Grapes</li>
</ul>
</div>
<div class="some_element">Element to Show and Hide</div>Since you are using jquery, you can use the .toggle() method to toggle the element. Try this
$(document).ready(function(){
$('.navbar-toggler').click(function(){
$("#search-id").toggle();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="navbar-toggler">Toggle Menu</button>
<ul id="search-id" style="display:none;">
<li>Dog</li>
<li>Cat</li>
<li>Mouse</li>
</ul>