Develop Reference

When i click on the hamburger icon, the icon overlaps the close icon. How to remove the hamburger icon when I click on it so that close icon can show

Here is the code below, hamburger icon appears when the width less than 375px. I only added the navigation part of HTML and CSS. I have a problem with removing the hamburger icon as it overlaps the close icon. Link for this project https://pranav1597.github.io/loopstudios-landing-page/
index.html
<nav class="nav-header">
<div class="nav-flex">
<div class="nav-logo">
<img src="images/logo.svg" alt="brand-logo" class="brand-logo">
</div>
<div class="nav-list">
<div class="hamburger-nav">
<a href="#" class="hamburger-icon">
<img src="images/icon-hamburger.svg" alt="" class="hamburger-image">
</a>
<div class="hamburger-link">
About
Careers
Events
Products
Support
</div>
</div>
</div>
</div>
<div class="nav-info">
<p class="nav-info--title">Immersive experiences that deliver</p>
</div>
</nav>
style.css
*{
box-sizing: border-box;
}
body{
margin:0;
padding:0;
font-size: 15px;
font-family: 'Josefin Sans', sans-serif;
}
/* navigation + header */
.nav-header{
background-image: url(images/mobile/image-hero.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
padding-bottom: 20em;
/* border: 2px solid red; */
}
/* flex of brand logo and nav links */
.nav-flex{
/* border: 2px solid red; */
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1em;
padding-top: 2em;
}
/* brand-logo */
.brand-logo{
width:70%;
}
.hamburger-nav{
/* border: 2px solid red; */
/* display: none; */
}
/* hamburger navbar */
.hamburger-icon{
width:90%;
}
.hamburger-link{
/* border: 2px solid red; */
display: none;
position: absolute;
left: 1em;
margin-top: 2em;
width: 90%;
text-transform: uppercase;
}
/* nav links */
.nav-link{
color:white;
text-decoration: none;
display: none;
display: block;
padding: .5em 0;
}
/* active states */
.nav-header.active{
background: black;
background-image: none;
}
.hamburger-image.active{
background-image: url(images/icon-close.svg) !important;
background-repeat: no-repeat;
background-size: cover;
}
.hamburger-link.active{
display: block;
}
.nav-info.active{
margin-top: 20em;
}
/* nav header title */
.nav-info{
border: 1px solid white;
margin: 0 auto;
margin-top:14em;
width: 90%;
color:white;
padding: 1.5em 1.5em;
}
.nav-info--title{
text-transform: uppercase;
font-size: 2.5em;
width: 90%;
/* border: 2px solid red; */
margin: 0;
}
script.js
const hamIcon = document.getElementsByClassName("hamburger-icon")[0];
const navLinks = document.getElementsByClassName("hamburger-link")[0];
const navHeader = document.getElementsByClassName("nav-header")[0];
const iconClose = document.getElementsByClassName("hamburger-image")[0];
const navInfo = document.getElementsByClassName("nav-info")[0];
hamIcon.addEventListener('click', () => {
navLinks.classList.toggle('active');
navHeader.classList.toggle('active');
iconClose.classList.toggle('active');
navInfo.classList.toggle('active');
})

Add
.hamburger-image.active {
width:0;
height:0;
padding:10px;
}
so the background is displayed but not the foreground.
Please let me know if this helps :-)

So since you are wanting something that changes the attributes of an element when something is clicked and you are already using js, this is a perfect application of the onclick attribute.
in your HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in your js
function openClose() {
jQuery('hamburger-image').attr('src', 'images/icon-close.svg');
}
In your CSS for .hamburger-image.active{ remove
background-image: url(images/icon-close.svg) !important;
and back in your HTML change <a href="#" class="hamburger-icon"> to
<a href="#" onClick="openClose()" class="hamburger-icon">

Multiple modals using JS

I have multiple div-containers all containing an image and some text. I want to make modals for all of the images, but I'm stuck getting them to work and I don't know what else I need to change. I'm struggling especially since I also have a settings modal inside of my off canvas menu.
How do I make all of the images work as a modal without losing the Settings off canvas menu? I know I have to change the JS for it to work for class instead of id, but it still doesn't work and I don't know what I'm missing.
<!-- OFF MENU CANVAS JS-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!-- END OFF MENU CANVAS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Begin settings page popup-->
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- End settings page popup-->
<!-- Begin img enlargen-->
<script>
// Get the modal
var modal =
this.getAttribute("rel"); document.getElementById('myModal2');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = this.getAttribute("rel"); document.getElementById('myImg');
var modalImg = document.getElementsByClassName("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<!--End img enlargen-->
#charset "UTF-8";
/* CSS Document */
header {
z-index: 1000;
width: 100%;
background-color: #5BC2FF;
margin: 0 auto;
position: relative;
box-shadow: 0px 0.5px 2px 0.2px black;
}
/* HEADER */
#airplane {
margin-left: 5px;
display: inline-block;
}
.headertext2 {
z-index: 100;
text-align: center;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
display: inline;
margin-left: 8px;
font-size: 30px;
}
/* OFF CANVAS MENU BEGINS*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #5BC2FF;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #586166;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: .5s;
padding: 16px;
display: inline-block;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* OFF CANVAS MENU END*/
body {
background-color: #586166;
height: 1000px;
}
p.div-container {
font-family: 'annie-use-your-telescope', "Arial";
margin-top: 5%;
font-size: 4vw;
}
.pic {
margin-bottom: 10%;
margin-left: 10px;
margin-right: 10px;
padding:1px;
border:1px solid #021a40;
background-color: #FF5B5F;
float: left;
width: 50%;
height: 50%;
}
#FirstPic {
margin-top: 100px;
}
#LastPic {
margin-bottom: 100px;
}
#FirstDesc {
margin-top: 100px;
}
.div-container {
display: flex;
overflow: hidden;
}
.Description {
float: left;
width: 50%;
height: 100px;
color: white;
padding-right: 5px;
}
/*SIGN UP FORM BEGIN*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 8px 12px 5px 3px;
display: inline-block;
}
input[type=submit] {
background-color: #D29E95;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin-bottom: 40px;
}
input[type=submit]:hover {
background-color: #FF5B5F;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-top: 30px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
/*SIGN UP FORM END*/
.section {
background-color: #5ECCBA;
width: 97%;
white-space: nowrap;
height: 375px;
margin: 85px 1.5% 20px;
padding-bottom: 5px;
float: left;
display: block;
box-shadow: 0px 2px 2px 0.2px black;
}
#ProfilePic {
padding-top: 10px;
padding-left: 10px;
}
h2 {
display: inline;
margin-left: 8%;
text-decoration: underline;
font-weight: 400;
color: white;
}
.ages {
float: left;
display: inline;
margin-top: -30px;
margin-left: 50%;
text-align: center;
padding-left:120px;
padding-top: -600px;
font-weight:lighter;
color: white;
}
.col-6 {
text-align: center;
}
.col-3 {
display: inline-block;
padding: 2px 2% 0.5% 2%;
margin: 0% 7%;
width: auto;
height: 30px;
text-align: center;
float: left;
box-shadow: 1px 1px 2px 0.2px white;
}
.inline-block {
display:inline-block;
float:left;
margin-left:5%;
margin-top: 1%;
}
.titles {
margin-left: 25%;
padding-top: 25px;
color: white;
}
.kmtravel {
text-align: center;
margin-left: 25%;
margin-top: -15px;
color: white;
}
.myworld {
background-color: #5ECCBA;
display: inline-block;
width: 97%;
height: 50px;
text-align: center;
margin: 0% 1.5% 0px;
box-shadow: 0px -1px 2px 0.2px black;
color: white;
padding-top: 10px;
border-bottom: medium;
}
#MyMapColours {
background-color: white;
width: 97%;
margin-left: 1.5%;
margin-right: 1.5%;
margin-bottom: 10px;
margin-top: 2px;
display: inline-block;
}
.lefttodiscover {
background-color: #5ECCBA;
display: inline-block;
width: 97%;
height: 50px;
text-align: center;
margin: 10px 1.5% 0px;
box-shadow: 0px -1px 2px 0.2px black;
color: white;
padding-top: 10px;
}
#map {
width:97%;
height:400px;
background:white;
margin: 2px 1.5% 70px;
box-shadow: 1px 1px 2px 0.2px black;
}
/* SETTINGS PAGE BEGINS */
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: white;
box-shadow: 0px -0.5px 2px 0.2px black;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
margin-left:90%;
font-size: 28px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* SETTINGS PAGE END*/
/* ENLARGEN IMAGE BEGIN*/
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal2-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal2-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close2 {
top: 15px;
right: 35px;
margin-bottom: 20px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
margin-right: 10%;
}
.close2:hover,
.close2:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal2-content {
width: 100%;
}
}
/* ENLARGEN IMAGE END*/
footer {
background: #5BC2FF;
color:white;
height:50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-top: 12px;
text-align: center;
box-shadow: 0px -0.5px 2px 0.2px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>My Journey</title>
<link href="css/mystyles.css" rel="stylesheet" type="text/css">
</head>
<body><!-- BEGIN BODY-->
<div class="jumbotron-fluid">
<header class="fixed-top">
<!-- OFF CANVAS MENU START -->
<div id="mySidenav" class="sidenav">
×
My Journey
My Account
New Account
My Friends
<br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<button id="myBtn">Contact</button>
Settings
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Are you having trouble using the app?</h3>
<p>Visit our website www.MyJourney.com<br>
Or contact us at +31 6 12510336</p>
<p>For more information.</p>
</div>
</div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<!-- OFF CANVAS MENU END -->
<div id="airplane"> <img src="img/Airplane logo.png" alt="logoheader" width="40px"> </div>
<h1 class="headertext2">My Trips</h1>
</header>
<div class="div-container">
<div class="pic" id="FirstPic"><img src="img/Kenya elephants.jpg" alt="TravelPic" width="100%" height="100%"></div>
<div class="Description" id="FirstDesc">
<p>KENYA <br>
<i>What:</i> The Big 5 <br>
<i>With:</i> Tom <br>
<i>When:</i> Jan. 2018 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic">
<img id="myImg" src="img/Mirror Lakes.jpg" alt="Mirror Lakes" width="100%" height="100%">
</div>
<div class="Description">
<p>NEW ZEALAND <br>
<i>What:</i> Mirror Lakes <br>
<i>With:</i> Robyn <br>
<i>When:</i> Feb. 2014 <br>
</p>
</div>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal2">
<span class="close">×</span>
<img class="modal-content2" alt="img01"><img class="img01" alt="img01">
<div id="caption"></div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Brazil rock dedo de deus.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BRAZIL <br>
<i>What:</i> Dedo de Deus <br>
<i>With:</i> Barbara & Paul <br>
<i>When:</i> May. 2017 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Sunset orange.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BELGIUM <br>
<i>What:</i> Sunset <br>
<i>With:</i> Maya <br>
<i>When:</i> Nov. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Amsterdam.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>NETHERLANDS <br>
<i>What:</i> Canals <br>
<i>With:</i> Vera <br>
<i>When:</i> Sep. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Lake Bled Slovenia.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>SLOVENIA <br>
<i>What:</i> Lake Bled <br>
<i>With:</i> Silvia & Mark <br>
<i>When:</i> Apr. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Table Mountain.jpeg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>SOUTH AFRICA <br>
<i>What:</i> Table Mountain <br>
<i>With:</i> Pauline <br>
<i>When:</i> Aug. 2015 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Mirror Lakes.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>NEW ZEALAND <br>
<i>What:</i> Mirror Lakes <br>
<i>With:</i> Robyn <br>
<i>When:</i> Feb. 2014 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic" id="LastPic"><img src="img/Caye Caulker Belize.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BELIZE <br>
<i>What:</i> Caye Caulker <br>
<i>With:</i> Romy <br>
<i>When:</i> Oct. 2013 <br>
</p>
</div>
</div>
<footer><!--BEGIN FOOTER-->
Adventure may hurt you but monotony will kill you.
</footer><!--END FOOTER-->
</div><!-- END CONTAINER -->
</body><!--END BODY-->
</html>

Second dropdown button in navigation bar showing the same content as the previous button?

My first dropdown button "Content" works correctly but when I click on the second dropdown button "Dropdown", the contents from the first dropdown button show up instead???
I have no idea why it is doing this??? Maybe I am overlooking a small detail, but I can't seem to find where I am going wrong with this.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>

Ummm.... because you call the same function from both buttons.
Essentially, you run the same piece of code, myFunction, despite which navigation item is clicked. Therefore, of course both items will always do the same thing.
Give each menu a different ID (remember that IDs need to be unique - i.e. you can't have two items with the same ID), and make myFunction take the ID of the element to show / hide, as shown below.
This means that there is a way for the function to determine which menu open, and thus it will open the correct one.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onmouseup = function(e) {
var dropdown = document.querySelector(".dropdown-content.show"); //Get any shown dropdown element (i.e. any element on the page with both the dropdown-content class and the show class
if (dropdown) { //If such an element exists, a dropdown needs to be closed
dropdown.classList.remove("show"); //So remove the show class
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownOne')">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownOne">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownTwo')">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownTwo">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
How does this work?
myFunction('dropdownOne') means that the id variable in myFunction is given the value dropdownOne - therefore when we call document.getElementById(id) it will interpret as document.getElementById('dropdownOne') instead, and hence the first dropdown is targeted.
Likewise, if we call myFunction('dropdownTwo'), then it will interpret as document.getElementById('dropdownTwo'), and thus target the second dropdown.
Therefore, you can add as many menu items like this as you want, assuming each has a unique identifier, and myFunction is given the unique ID each time.

Target closest icon to change it into another icon

I have a series of cards in the same page. Below is the example the example below where I have put for this example only 1 card (but there are many more).
I fail to use jquery 'closest' or 'siblings' or something similar to do the following: when a user click on a card it collapses and the javascript kicks in to show the content. I need at that moment to replace the "plus icon" by a "minus icon". (only on this specific card so not using at any point a id or class containing the number of the card '354' in the example below)
Jsfiddle Demo
The Javascript should target the icon but it does not change it when I click
If you have trouble making appear the content, do not worry, it's not the focus of the question. I just want to know how to target the icon and change into to glyphicon minus.
HTML
<div id="operation-zone">
<ul class="cards-list">
<li class="card 354" data-opcode="CATIMINI26">
<div class="card-content" id="accordion_354">
<a class="card-detail-opener" id="BtnHomeOperationExpand_53313" role="button" data-toggle="collapse" data-parent="#accordion_354" href="#collapseOne_354" aria-expanded="false" aria-controls="collapseOne_354">
<i class="glyphicon glyphicon-plus detail-icon_354"></i>
</a>
<div class="card-image card-lazy-preloader" id="accordion2">
<a href="/campaigns/xxxxx">
</a><figure><a href="/campaigns/xxxxxx">
<!-- responsive image -->
<img style="opacity: 1; display: block;" id="HPImageBanner_354" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
</figure>
</div>
</div>
<div id="collapseOne_354" class="smux details details_354 panel-collapse collapse left-aligned" role="tabpanel" aria-labelledby="headingOne" style="height: auto;">
<div id="DivHomeOperationDates" class="dates">
Jusqu'au <span class="brand-color">mercredi 06/04 6h</span>
</div>
<div id="DivHomeOperationDescription_52850" class="description">
operation in venicesqqsqssqsqsqsqsqsqss qui ravira les petits et les grands ! Retrouvez Les Schtroumpfs, Les Rebelles de la Foret, Hotel Transylvanie et bien d'autres encore...
</div>
<div class="card-info-actions">
<a class="btn btn-lg btn-primary" href="/campaigns/operation-in-venicesqqsqssqsqsqsqsqsqss">go Now ></a>
</div>
</div>
<!-- end of campaign card details on 1-column view-->
</li>
</ul>
</div>
Javascript
$('#collapseOne_354').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
});
$('#collapseOne_354').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
CSS
.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
text-align: left;
width: 100%;
border-bottom: 1px solid black;
position: relative;
}
.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: green;
}
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}
.card-detail-opener {
color: green;
font-size: 16px;
text-align: center;
padding-left: 1px;
width: 25px;
height: 25px;
border-radius: 50%;
line-height: 27px;
background: grey;
position: absolute;
z-index: 2;
opacity: .75;
filter: alpha(opacity=75);
bottom: 60%;
right: 30%;
&:hover { background: #7E7E7E; }
&:focus { background: #7E7E7E; }
}
}
.card-detail-opener:link {
color: green;
}
.glyphicon.glyphicon-remove {
color: #333;
&:hover { color: green; }
&:focus { color: green; }
}
.glyphicon.glyphicon-plus {
top:1px;
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }
}
.glyphicon.glyphicon-minus {
top:2px;
padding-right: 2px;//tweak to center
color: #333;
&:hover { color: #ffffff; }
&:focus { color: #ffffff; }
}
// Content of the card details in the 1-column view
.card .details {
padding-top: 10px;
background-color: rgba(255,255,255,1);
}
.details {
padding-left: 1em;
}
.details .dates {
padding-top: 10px;
font-size: .8em;
line-height: 1.6em;
color: #464650;
margin-right: 1em;
background-size: 90px auto !important;
background-repeat: no-repeat !important;
background-position-x: right !important;
background-position-y: 0px !important;
margin-bottom: 8px;
}
.details .baseline {
color: #888;
font-size: 0.75em;
line-height: 0.4em;
}
.details .description {
font-size: .65em;
color: #464650;
line-height: 1.1em;
overflow: hidden;
}
// End of content of the card details in the 1-column view
.card-info-actions {
float: right;
padding: 0 5px 2px 0;
clear: both;
}
//smaller buttons for cards
.card-info-actions .btn-primary {
font-size: 15px;
}
.card-short-info a.dateSales {
color: #464650;
}
.info-overlay {
display:none;
z-index:999;
position:absolute;
height:100%;
width: 100%;
background-color: rgba(255,255,255,.9);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF)\9";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);
transition: all .4s ease-in-out;
border-bottom: 4px solid green;
}
.close-overlay {
float:right;
padding:5px;
}
.info-overlay a {
display: block;
line-height: normal;
text-decoration: none;
cursor: pointer;
}

The ID is wrong collapseOne_354 while you are binding collapseOne
EDIT
I would reach the glyphicon with
var list = $('.cards-list')
$('li', list).click(function(e){
var card=$(this);
$(this).find(".glyphicon").toggleClass("glyphicon-minus").toggleClass("glyphicon-plus");
});

Prevent Bootstrap dropdown from collapsing until button is clicked

Please comment with with clarifying questions. I suspect this question is poorly worded, but it's complicated so it is a tough question to ask.
I currently have a dropup on bootstrap navbar that I've converted to a toolbar. I've moved 2 bootstrap datepickers into the dropup in order to select a range.
The problem is that once I select the date for one of the datepicker inputs, the dropup closes. I'd like it to stay open until the OK button is clicked or I click out of the dropup.
If you don't have them, here are the BOOTSTRAP DOCS
The line that closes the drop down is on line 798 of bootstrap.js in the clearMenus() fuction:
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
I've been learning Javascript, but this problem is over my head.
Front-end
...
<div class="dropup mobilewidth mobilebottom">
<button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Date Range
<span class="caret"></span>
</button>
<ul class="dropdown-menu datepicWidth" aria-labelledby="dropdownMenu2">
<div class="dpInputs">
<div class="input-group" style="padding-bottom: 4px;">
<span class="input-group-addon datepic1stChld">From:</span>
<input class="datepicker dp1 datepic2ndChld" readonly="true" name="startDate">
</div>
<div class="input-group">
<span class="input-group-addon datepic1stChld">To: </span>
<input class="datepicker dp2 datepic2ndChld" readonly="true" name="endDate">
</div>
</div>
<div class="dpSubmit">
<button type="submit" id="dpSubmitBtn">OK</button>
</div>
</ul>
</div>
</div>
...
My css
.navbar {
border-radius: 0px;
}
.dropup{
display: inline-block;
}
.dropdown-menu {
padding: 4px 4px 4px 4px;
min-width: 30px;
}
.navbar-default2 {
background-color: #f8f8f8;
border-color: #e7e7e7;
position: fixed;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
vertical-align: middle;
}
.navbar-default2 .navbar-brand {
color: #777;
}
.navbar-default2 .navbar-toggle:hover,
.navbar-default2 .navbar-toggle:focus {
background-color: #ddd;
}
.navbar-default2 .navbar-toggle {
border-color: #ddd;
}
.navbar-default2 .navbar-toggle .icon-bar {
background-color: #888;
}
#media (min-width: 768px) {
.navbar-footer {
float: left;
}
}
.container > .navbar-footer,
.container-fluid > .navbar-footer,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
#media (min-width: 768px) {
.container > .navbar-footer,
.container-fluid > .navbar-footer,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-footer {
padding: 5px 15px 5px 25px;
}
button {
margin-top: 8px;
}
.onlyMobile {
display: none;
}
.datepic1stChld{
width: 63px;
}
.datepic2ndChld{
width: 100%;
border-radius: 0px;
border: 1px solid #ccc;
}
.datepicWidth {
width: 280px;
left: -165px;
}
.dpInputs{
width: 200px;
float: left;
}
.dpSubmit{
width: 68px;
float: left;
}
#dpSubmitBtn{
margin: 0px 2px 2px 3px;
width: 100%;
height: 64px;
border: 1px solid #ccc;
background-color: #eee;
}
#media (max-width: 767px) {
.btn-default{
font-size: 17px;
}
.three{
width: 33.333333333%;
}
.mobilewidth{
width: 100%;
}
.onlyMobile{
display: block;
}
.mobilebottom {
padding-bottom: 8px;
}
.WM3MY{
width: 16.75%;
}
.fullwidth{
width: 100%;
font-size: 18px;
}
.input-group{
width: 100%;
}
.datepicWidth {
width: 100%;
left: 0px;
}
.dpInputs{
width: 73%
}
.dpSubmit{
width: 26%;
}
#dpSubmitBtn{
font-size: 18px;
height: 74px;
border-radius: 1px;
}
.datepic1stChld{
width: 72px;
}
.datepic2ndChld{
font-size: 18px;
}
.input-group-addon{
font-size: 18px;
}
}
.navbar-collapse.in {
overflow-y: visible;
}
I don't think you'll need them but here are the DATEPICKER DOCS

Instead of writing some javascript or jquery code(reinventing the wheel). The above scenario can be managed by bootstrap auto-close option.
You can provide either of the values to auto-close:
always - (Default) automatically closes the dropdown when any of its elements is clicked.
outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown.
disabled - disables the auto close
Take a look at the following plunkr :
http://plnkr.co/edit/gnU8M2fqlE0GscUQtCWa?p=preview
Set
uib-dropdown auto-close="disabled"
Hope this helps :)

I think if you overwrite the "changeDate" event of the datepicker and prevent its default behavior, it should work.
$("#myCal").on('changeDate', function(ev)
{
ev.preventDefault();
});
You'll need to change the "#myCal" with the proper selector for your calendar though.