How can I amend this JavaScript code that will hide an open dropdown if another dropdown is selected? The original code came from the W3.CSS documentations, but I'm unsure of how to amend it. I tried replacing w3-show with w3-hide, tried removing and adding the classes within the JavaScript, but nothing seems to be doing the trick.
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("mySidebar");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
$('body').addClass("fixedPosition"); /* prevents page from scrolling when mobile navbar is open */
} else {
x.className = x.className.replace(" w3-show", "");
$('body').removeClass("fixedPosition");
}
}
//dropdowns on mobile nav
function myDropFunc(dropParam) {
var x = document.getElementById(dropParam);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-light-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-light-grey", "");
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-right" style="width: 100%;" id="mySidebar">
<div class="w3-panel w3-display-container w3-padding-large">
<span onclick="myFunction()" class="w3-button w3-red w3-display-topright" style="margin-top: -22px;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span>
</div>
<div class="w3-dropdown-click w3-border-bottom">
<button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('it-services')">IT SERVICES <i class="fa fa-caret-down"></i></button>
<div id="it-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
IT Support
Managed IT Services
Network Design and Administration
IT Disaster Recovery
</div>
</div>
<div class="w3-dropdown-click w3-border-bottom">
<button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('web-services')">WEB SERVICES <i class="fa fa-caret-down"></i></button>
<div id="web-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
Website Support
Web Design Package
Affordable SEO
</div>
</div>
</div>
What you can do is hide all w3-dropdown-content before you show the dropdown that was clicked.
To do this you can amend myDropFunc(...) to close all content before it shows the clicked content
Here is the relevant piece of code to do this in that function. It gets all content by the classname w3-dropdown-content and iterates through each node to remove the w3-show class (whether it has it or not)
var allDropDownContent = document.getElementsByClassName("w3-dropdown-content");
for (var i = 0; i < allDropDownContent.length; i++) {
allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", "");
}
and a full working example
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("mySidebar");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
$('body').addClass("fixedPosition"); /* prevents page from scrolling when mobile navbar is open */
} else {
x.className = x.className.replace(" w3-show", "");
$('body').removeClass("fixedPosition");
}
}
//dropdowns on mobile nav
function myDropFunc(dropParam) {
// close all drop down content before showing clicked one.
var x = document.getElementById(dropParam);
if (x.className.indexOf("w3-show") == -1) {
var allDropDownContent = document.getElementsByClassName("w3-dropdown-content");
for (var i = 0; i < allDropDownContent.length; i++) {
allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", "");
}
x.className += " w3-show";
x.previousElementSibling.className += " w3-light-grey";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-light-grey", "");
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<div class="w3-sidebar w3-bar-block w3-card-2 w3-animate-right" style="width: 100%;" id="mySidebar">
<div class="w3-panel w3-display-container w3-padding-large">
<span onclick="myFunction()" class="w3-button w3-red w3-display-topright" style="margin-top: -22px;"><i class="fa fa-times fa-2x" aria-hidden="true"></i></span>
</div>
<div class="w3-dropdown-click w3-border-bottom">
<button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('it-services')">IT SERVICES <i class="fa fa-caret-down"></i></button>
<div id="it-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
IT Support
Managed IT Services
Network Design and Administration
IT Disaster Recovery
</div>
</div>
<div class="w3-dropdown-click w3-border-bottom">
<button class="w3-button w3-padding-large w3-text-black w3-border-bottom" onclick="myDropFunc('web-services')">WEB SERVICES <i class="fa fa-caret-down"></i></button>
<div id="web-services" class="w3-dropdown-content w3-bar-block w3-card-2" style="z-index: 1000;">
Website Support
Web Design Package
Affordable SEO
</div>
</div>
</div>
Related
Hi im doing an project which using nodemcu to collect temperature and relay data state to firebase, this part already been done
DrumStatus:"Stuck"
Relay1Status:"1"
Relay2Status:"1"
Relay3Status:"1"
TemperatureStatus:"27.500"
WaterStatus:"Dirty"
the thing is my snap.value code for relay1 2 3 is good but when i snap the value of TemperatureStatus, DrumStatus & WaterStatus it didn't display on the web app
Here is my code for html page
<script src="scripts/index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="topnav">
<h1>Sensor Readings App <i class="fas fa-clipboard-list"></i></h1>
</div>
<p></p>
<div class="cards">
<!--TEMPERATURE-->
<div class="card">
<p>
<i class="fas fa-thermometer-half" style="color: #fa5102"></i>
TEMPERATURE
</p>
<p>
<span class="reading"><span id="temp"></span> °C</span>
</p>
</div>
<!--RELAY 1-->
<div class="card">
<p>
<i class="fas fa-sync-alt" style="color: #6c2894"></i>
DRUM
</p>
<p>
<span class="reading"><span id="drumstatus"></span> </span>
</p>
</div>
<!--TANK SIZE-->
<div class="card">
<p>
<i class="fas fa-tint" style="color: #00add6"></i>
WATER LEVEL
</p>
<p>
<span class="reading"><span id="waterstatus"></span> </span>
</p>
</div>
<!-- ADRF POWER-->
<div class="card">
<p>
<i class="fas fa-power-off" style="color: #1dbb32"></i>
SYSTEM POWER
</p>
<p>
<span class="reading"><span id="systempower"></span>OFF - ON</span>
</p>
<p>
<div class="progress">
<div class= "toggle-btn1" id="unact1">
<div class= "inner-circle">
</div>
</div>
<div class= "toggle-btn1 active" id="act1" >
<div class= "inner-circle">
</div>
</div>
</div>
</p>
</div>
<!-- CLEAN DRUM-->
<div class="card">
<p>
<i class="fas fa-shower" style="color: #26adcf"></i>
CLEAN DRUM
</p>
<p>
<span class="reading"><span id="cleandrum"></span>OFF - ON</span>
</p>
<p>
<div class="progress">
<div class= "toggle-btn2" id="unact2">
<div class= "inner-circle">
</div>
</div>
<div class= "toggle-btn2 active" id="act2" >
<div class= "inner-circle">
</div>
</div>
</div>
</p>
</div>
<!-- WATER PUMP-->
<div class="card">
<p>
<i class="fas fa-faucet" style="color: #460ec9"></i>
WATER PUMP
</p>
<p>
<span class="reading"><span id="waterpump"></span>ON - OFF</span>
</p>
<p>
<div class="progress">
<div class= "toggle-btn3" id="unact3">
<div class= "inner-circle">
</div>
</div>
<div class= "toggle-btn3 active" id="act3" >
<div class= "inner-circle">
</div>
</div>
</div>
</p>
</div>
here is the code for script.js
firebase.initializeApp(firebaseConfig);
// Elements for sensor readings
//const tempElement = document.getElementById("temp");
$(document).ready(function () {
var database = firebase.database();
var Relay1Status;
var Relay2Status;
var Relay3Status;
//var Relay4Status;
var TemperatureStatus;
var DrumStatus;
var WaterStatus;
//var tempElement = $("#temp");
//var dbRefTemp = firebase.database().ref().child("temperature");
//document.getElementById("temperature").style.display = "block";
// Update page with new readings
/*
dbRefTemp.on("value", (snap) => {
tempElement.innerText = snap.val();
});
*/
//var temp_val = childSnapshot.val().temperature;
//$("#temp").append(temp_val);
database.ref().on("value", function (snap) {
Relay1Status = snap.val().Relay1Status;
Relay2Status = snap.val().Relay2Status;
Relay3Status = snap.val().Relay3Status;
//Relay4Status = snap.val().Relay4Status;
TemperatureStatus = snap.val().TemperatureStatus;
$("#temp").append(TemperatureStatus);
WaterStatus = snap.val().WaterStatus;
$("#waterstatus").append(WaterStatus);
DrumStatus = snap.val().DrumStatus;
$("#drumstatus").append(DrumStatus);
if (Relay1Status == "1") {
document.getElementById("unact1").style.display = "none";
document.getElementById("act1").style.display = "block";
} else {
document.getElementById("unact1").style.display = "block";
document.getElementById("act1").style.display = "none";
}
if (Relay2Status == "1") {
document.getElementById("unact2").style.display = "none";
document.getElementById("act2").style.display = "block";
} else {
document.getElementById("unact2").style.display = "block";
document.getElementById("act2").style.display = "none";
}
if (Relay3Status == "1") {
document.getElementById("unact3").style.display = "none";
document.getElementById("act3").style.display = "block";
} else {
document.getElementById("unact3").style.display = "block";
document.getElementById("act3").style.display = "none";
}
});
$(".toggle-btn1").click(function () {
var firebaseRef1 = firebase.database().ref().child("Relay1Status");
if (Relay1Status == "1") {
firebaseRef1.set("0");
Relay1Status = "0";
} else {
firebaseRef1.set("1");
Relay1Status = "1";
}
});
$(".toggle-btn2").click(function () {
var firebaseRef2 = firebase.database().ref().child("Relay2Status");
if (Relay2Status == "1") {
firebaseRef2.set("0");
Relay2Status = "0";
} else {
firebaseRef2.set("1");
Relay2Status = "1";
}
});
$(".toggle-btn3").click(function () {
var firebaseRef3 = firebase.database().ref().child("Relay3Status");
if (Relay3Status == "1") {
firebaseRef3.set("0");
Relay3Status = "0";
} else {
firebaseRef3.set("1");
Relay3Status = "1";
}
});
});
Im currently using append to update but it keep spamming more value anytime a new value appears. My question is how to snap the value of those status and display like Relay 1 2 3 or append and update the those status continously without spamming it ?
Best regards.
My full source code can be found at https://github.com/KyleTo132/Autonomous-Rotary-Drum-Filter in Webcode dir
The webapp is currently deploy at domain: https://adrf-relay-control.firebaseapp.com/
I am trying to show a div with JavaScript, but as the title says, it is taking 2 clicks to show.
Here's the code I am using, and the JS is being called with a <script> tag on the same file:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div id="mobile-search" class="mobile-search">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button" onclick="show_search()">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
<style>
.mobile-search {
display: none;
}
</style>
<script type="text/javascript">
var mobile_search = document.getElementById("mobile-search");
function show_search() {
if (mobile_search.style.display === "none") {
mobile_search.style.display = "block";
} else {
mobile_search.style.display = "none";
}
}
</script>
As you can see, it is taking 2 clicks to show the div, and I want it to be only 1. What is going on?
You need to click the button twice because when you click the button for the first time, following condition
mobile_search.style.display === "none"
is false. This is because Element.style property returns CSSStyleDeclaration object which contains a list of styles that are added on the element using the style attribute. In other words, it returns the inline CSS styles set on the element. In your code, since you haven't added the display: none style using inline CSS, initial value of mobile_search.style.display is not what you expect it to be.
So, on first click, the else block executes, setting display to none and when you click for the second time, above mentioned condition evaluates to true and the input element is displayed.
Solution
You have couple of options to solve the problem:
Add display: none as an inline-style on the #mobile-search element.
<div id="mobile-search" class="mobile-search" style="display: none;">
<input type="search" name="" />
</div>
Use Window.getComputedStyle() method to get the value of the display property.
var mobile_search = document.getElementById("mobile-search");
function show_search() {
if (window.getComputedStyle(mobile_search).display === "none") {
mobile_search.style.display = "block";
} else {
mobile_search.style.display = "none";
}
}
.mobile-search {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button" onclick="show_search()">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
The style property doesn't return styles from CSS. According to your condition when you are clicking the button it's adding display: none, after clicking the second time it's adding display: block, that's why you need to click twice to show the div.
You can try this in two ways.
Step 1: Just toggle block and none on click function
var toggle = document.getElementById("mobile-search-button");
var content = document.getElementById("mobile-search");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});
.mobile-search {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
Step 2:
You don't need any css, add styles to your input box.
var mobile_search = document.getElementById("mobile-search");
function show_search() {
if (mobile_search.style.display === "none") {
mobile_search.style.display = "block";
} else {
mobile_search.style.display = "none";
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search" style="display: none">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button" onclick="show_search()">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
Step: Extra
You can do it much more in an easier way. Just toggle class onclick
$("#mobile-search-button").on("click", function(){
$("#mobile-search").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search" style="display: none">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
When you already have a class to hide mobile-search, why not toggle that :
var toggle = document.getElementById("mobile-search-button");
var classes = document.getElementById("mobile-search").classList;
toggle.addEventListener("click", function() {
classes.contains("mobile-search") ? classes.remove("mobile-search") : classes.add("mobile-search");
});
.mobile-search {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mobile-search" class="mobile-search">
<input type="search" name="">
</div>
<button class="search-btn" id="mobile-search-button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
I am trying to trigger a function through a event listener with only one click.
But it occurs after two click (in the first time) if I don't do F5 its trigger after one click.
Code:
HTML
<div class="main-header-navbar">
....
<span class="main-header-navbar-right-icons">
<i class="fas fa-search header-icon"></i>
<i class="fas fa-plus header-icon"></i>
</span>
</div>
JS
const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
ADD_FORM_BUTTON.addEventListener("click", function (event) {
event.preventDefault();
if (ADD_FORM.style.display === "none") {
ADD_FORM.style.display = "flex";
} else ADD_FORM.style.display = "none";
});
What am I missing?
You probably need to add style="display: none;" to your ADD_FORM so that it's initially hidden, then when you click on the fa-plus it will display it. See the snippet below:
const ADD_FORM_BUTTON = document.querySelector(".fa-plus");
const ADD_FORM = document.getElementById("form");
ADD_FORM_BUTTON.addEventListener("click", function(event) {
event.preventDefault();
if (ADD_FORM.style.display === "none") {
ADD_FORM.style.display = "flex";
} else {
ADD_FORM.style.display = "none"
};
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="main-header-navbar">
<span class="main-header-navbar-right-icons">
<i class="fas fa-search header-icon"></i>
<i class="fas fa-plus header-icon"></i>
</span>
<div id="form" style="display: none;">ADD_FORM</div>
</div>
I have an ul (unordered list) which contains several li (list items) when I click on the + sign left to li, console log should output "description expanded" For the two first li, it works just fine, but not for any other li's. The html code by default includes only 2 li's. any li after that is added through the form. However, any new li does not produce the console log output. Which means they're not responding to clicks. I'm using jQuery to listen for click events. When clicking on the icon.
project link http://pctechtips.org/apps/todo/
//variables
//todoList array to hold (title, description) for every todo tiem
var todoList = []; //{title: "value", desc: "value"},
var numId = 2; //num is for desc paragraph id eg <p id="plus-3">
/*
* Script main body
*/
$(document).ready(function() {
//hide form when doc loads first time
$("#submit-form").hide();
//hide list item description <p>
$(".item-desc").hide();
//listener for show hide form functionality
$("#add-todo").click(function() {
toggleForm();
return false; //return false to prevent page reload
});
//listener for add new item form (submit button)
$(".btn").click(function() {
console.log("submit item");
addToList();
});
//listener for expanding li description
$(".plus").click(function() {
console.log("description expanded")
var plusId = $(this).attr("id"); //grabbing id of plus sign
showDescription(plusId);
return false;
});
});
//functionality for show / hide form
function toggleForm() {
if($("#submit-form").is(":hidden")) {
console.log("form exapnded");
$("#submit-form").show("slow");
$("#form-icon").removeClass("fa-plus-square-o");
$("#form-icon").addClass("fa-minus-square-o");
}
else {
console.log("form hidden");
$("#submit-form").hide("slow");
$("#form-icon").removeClass("fa-minus-square-o");
$("#form-icon").addClass("fa-plus-square-o");
}
}
//add new item to todo list items
function addToList() {
numId++;
//getting data from input fields
var todoTitle = $("#todo-title").val();
var todoDesc = $("#todo-desc").val();
//checking user input
if(todoTitle == "" || todoDesc == "") {
alert("fill in all fields!");
}
else {
console.log(todoTitle + "\n" + todoDesc);
//adding values to array
todoList.push({title: todoTitle, desc: todoDesc},);
//adding new li to ul
var ul = document.getElementById("list");
var li = document.createElement("li");
$(li).addClass("list-group-item justify-content-between align-items-center");
$(li).append(($('<i id="plus-'+numId+'" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>')));
$(li).append(($('<span class="left marg-left">'+todoTitle+'</span>')));
$(li).append(($('<i class="fa fa-trash-o right" aria-hidden="true"></i>')));
$(li).append(($('<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>')));
ul.appendChild(li);
}
}
//expanding description under for each todo
function showDescription(plusId) {
//getting the number from id
var num = plusId.substring(plusId.indexOf("-")+1);
//checking for hide / show description paragraph
if($("#desc-"+num).is(":hidden")) {
$("#desc-"+num).show("slow");
$("#desc-"+num).removeClass("fa-plus-square-o");
$("#desc-"+num).addClass("fa-minus-square-o");
}
else {
$("#desc-"+num).hide("slow");
$("#desc-"+num).removeClass("fa-minus-square-o");
$("#desc-"+num).addClass("fa-plus-square-o");
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>TodoList App</title>
<!-- bootstrap, fontawsome cdn -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- local stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- local javascript -->
<script type="text/javascript" src="js/todo.js"></script>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class="add-item text-white text-center col-sm-12 col-md-10 col-lg-8 mb-4">
<a id="add-todo" class="new-todo text-white text-center" href=""><i id="form-icon" class="fa fa-plus-square-o" aria-hidden="true"></i> Enter new todo item</a>
<div id="submit-form" class="form-hide text-center col-sm-12 col-md-12 col-lg-8">
<form class="">
<div class="form-group">
<input type="text" class="form-control" id="todo-title" placeholder="Todo Title" value="Pay Car Insurance">
</div>
<div class="form-group">
<input type="text" class="form-control" id="todo-desc" placeholder="Todo Description" value="This is to pay car insurance">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul id="list" class="list-group mt-4 pb-4">
<li class="list-group-item justify-content-between align-items-center">
<i id="plus-1" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>
<span class="left marg-left">Pay Car Insurance </span>
<i class="fa fa-trash-o right" aria-hidden="true"></i>
<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>
</li>
<p id="desc-1" class="item-desc bg-white">Helloooooooooo this is description</p>
<li class="list-group-item justify-content-between align-items-center">
<i id="plus-2" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>
<span class="left marg-left">Pay Car Insurance </span><i class="fa fa-trash-o right" aria-hidden="true"></i>
<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>
</li>
<p id="desc-2" class="item-desc bg-white">Helloooooooooo this is description</p>
</ul>
</div>
</div>
</body>
</html>
ok for dynamically added elements the even listener needs to be defined at the root / document level. so
$("class").on("click", function() { });
will not work. It needs to be
$(document).on("click", ".class", function() { });
Thanks to "MADDY BLACKLISTED" above pointed me in right directions
Use
$(document).on("click", ".plus", function() {
console.log("description expanded")
var plusId = $(this).attr("id"); //grabbing id of plus sign
showDescription(plusId);
return false;
});
Instead of having a static click listener defined at document load.
I have a one-page layout for my homepage. (http://www.humipack.in )It has several sections with anchors and the main menu items pointing out to those anchors down that same page. Now, when a link is clicked from the sub menu of the responsive navbar icon menu, it stays open.
Is there any config that allows the responsive menu to be closed just after a click has been produced to anchor locations in the same page?
EDIT: Below is my HTML Code
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()"
title="Toggle Navigation Menu" >
<i class="fa fa-bars"></i> </a>
HOME
ABOUT US
<div class="w3-dropdown-hover w3-hide-small">
<button class="w3-padding-large w3-button" title="More" >PRODUCTS <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
White Silica Gel
Blue Silica Gel
Orange Silica Gel
Silica Gel Beads
</div>
</div>
EXTRAS
CONTACT
<a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right">
<i class="fa fa-search"></i></a>
</div>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
ABOUT
PRODUCTS
CONTACT
MERCH
</div>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
I added a new function myFunction1 as below:
// Used to toggle the menu on small screens when clicking on the sub menu
item
function myFunction1() {
var x = document.getElementById("navDemo");
x.className = x.className.replace(" w3-show", "");
if (x.className.indexOf("w3-hide-small") == -1) {
x.className += " w3-hide-small";
} else {
x.className = x.className.replace(" w3-hide-small", "");
}
}
and modified the myFunction() as below:
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
//added the below line of code
x.className = x.className.replace(" w3-hide-small", "");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
and also in the sub menu item ABOUT href added the following onClick :
ABOUT
I think, when you click on this anchor. You should toogle the navbar like..
$('.nav-collapse').toggle();
You can do it if you are using JQuery, anyway... Could you please post any code to help you?