We Keep Coding

Javascript collapse DIV on click

I'm learning javascript, but I'm encountering some problems I need help with. I have a notification box with different groups. I'm wanting it to be possible for only one notification group to be open at a time.
With CSS, i'm having all notification groups collapsed by default. Whenever someone clicks on new group tab, the existing group should collapse and the new tab should open.
CodePin: https://codepen.io/dansbyt/pen/xxgayPa
$('.notification-tab').click(function(e){
if($(e.currentTarget).parent().hasClass('active')){
$('.notification-group').removeClass('active');
}
else{
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
})
.notification-list-item{
padding: 5px 25px 15px;
border-bottom: 1px solid #e3e3e3}
.notification-list-item:nth-child(even){background-color: #E3E3E3}
.notification-tab {
border-bottom: 1px solid #e3e3e3;
display: inline-block;
width: 100%}
.visible {display: block !important}
.profiledrop {
width: 300px;
height: auto;
display: none;
max-height: 400px;
overflow-y: auto;
padding: 0;
margin: 0;
background: #eee;
margin-top: 3px;
margin-right: -15px;
border-top: 4px solid blue;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}
.notification-group{
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
min-height: 65px;}
.notification-list{
padding: 0;
overflow-y: auto;
height: 0px;
max-height: 200px;
transition: height .15s;}
.active .notification-list {height: 200px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}
a {color: #5B7042; text-decoration: none; font-weight: bold}
.label{
float: right;
margin-top: 20px;
margin-right: 10px;
color: $primary-color;
border: 1px solid orange;
padding: 0px 7px;
border-radius: 15px;}
h4 {margin-left: 10px}
h4, .label{display: inline-block;}
.item-footer .date{float: right}
.expanded {background-color: purple}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<a href="#" id='launch'>Hi</a>
<ul class="profiledrop visible">
<li class="notification-group">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">Complete an assignment you need to do before the deadline on Monday.</p>
<div class="item-footer">
<span class="from">project3</span>
<span class="date">2m ago</span>
</div>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">Alivia was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">5s ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Marshall was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">30m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Trae was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">1d ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Kennedy was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">5d ago</span>
</div>
</li>
</ul>
</li>
<li class="notification-group active">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">History homework added by Patrick.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Math homework added by Patrick.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Science homework added by Brandi.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
</ul>
</li>
</ul>
</div>

I am having problem with the toggle button in the menu, when its max-width = 1200px,. i.e. When i toggle on to the toggle button, nothing appears

I am having problem with the toggle button in the menu, when its max-width = 1200px,. i.e. When i toggle on to the toggle button, nothing appears.
Though i have made the menu for max-width = 1200px but still it doesn't appears. Please help
I have added bootstrap 4.3 in the html script. Please if anyone can have a look at it and help me out. As i am having a problem with this and i want it to be done through css as i am not well equipped with javascript.
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
/*********************************
*** Marque
*********************************/
.marquee {
background: #2a4563;
box-shadow: 0 0 5px 0;
padding: 1px;
/*border: 1px;
border-left: 10px;
border-style: solid;
border-color: #FF5733 ;*/
}
.marquee a {
color: white;
text-decoration: none;
font-size: 18px;
line-height: 1.5;
}
/*********************************
*** Logo Bar
*********************************/
#logo-bar {
background: #fff;
padding-top: 3px;
}
#logo-bar .logo {
display: flex;
align-items: center;
}
#logo-bar .logo img{
max-width: 280px;
}
#logo-bar .logo-2 img{
max-width: 200px;
margin-left: 70px;
}
#menu {
background: #2a4563;
box-shadow: 0 0 3px 0;
}
#menu ul {
text-align: center;
margin-bottom: 0;
}
#menu ul li {
display: inline-block;
padding: 8px 20px;
}
#menu ul li:hover {
background-color: orange;
transition: ease-in .3s;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
#menu ul li:hover a {
color: black;
transition: ease-in .3s;
}
#menu ul li ul {
display: none;
position: absolute;
padding: 10px;
background: orange;
}
#menu ul li:hover ul {
display: block;
z-index: 1;
padding: 10px;
}
#menu ul li ul li {
display: block;
}
#menu ul li ul li:hover {
background: #2a4563;
transition: ease-in .3s;
}
#menu ul li ul li:hover a {
color: #fff;
transition: ease-in .3s;
}
label{
font-size: 26px;
line-height: 70px;
display: none;
}
#toggle{
display: none;
}
.mobile-menu{
display: none;
}
/*********************************
*** Title
*********************************/
#title{
min-height: 550px;
background: grey;
}
#media only screen and (max-width: 1200px){
.logo-bar{
display: none;
}
.mobile-menu{
display: block;
box-shadow: 0 0 5px 0;
}
.mobile-menu-1{
padding: 0 0 0 50px;
}
label{
display: block;
pointer: cursor;
}
#menu ul li{
display: none;
width: 100%;
text-align: center;
}
#menu ul li a{
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + #menu ul{
display: block;
}
}
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<!-- Marquee Starts -->
<div class="marquee">
<marquee behavior="scroll" scrollamount="4" direction="left" class="marqueeStyle" onmouseover="this.stop();" onmouseout="this.start();">
<i class="fas fa-newspaper"></i> University will remain closed upto 30th May 2020 to avoid gathering & prevention of spreading Novel Corona Virus
</marquee>
</div>
<!-- Marquee Ends-->
<!-- Logo Bar Starts -->
<header class="header">
<div id="logo-bar">
<div class="container">
<div class="logo-bar">
<div class="row">
<div class="logo col-lg-6 col-md-6">
<h1>Navbar</h1>
</div>
<div class="logo-2 col-lg-3 col-md-3">
<h1>Second Navbar</h1>
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu-sidebar col-lg-3 col-md-3">
<button class="btn btn-sm btn-primary">Student Login</button> <button class="btn btn-sm btn-primary">Admin Login</button>
<h6><strong>Call Us:</strong> +91-360-2277560</h6>
<h6><Strong>Email Us:</Strong></h6>
<h6>info#theglobaluniversity.co.in</h6>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-menu">
<div class="row">
<div class="mobile-menu-1 col-10 d-flex my-auto">
<h1>Navbar</h1>
</div>
<div class="mobile-menu-2 col-2 d-flex my-auto">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
</div>
</div>
</div>
<!-- Logo Bar Ends -->
<!-- Menu Bar Starts -->
<div id="menu">
<div class="container">
<ul>
<li><i class="fas fa-home"></i> </li>
<li class="nav-item">About Us
<ul>
<li class="nav-sub-item">About TGU</li>
<li class="nav-sub-item">TGU Vision</li>
<li class="nav-sub-item">TGU Mission</li>
<li class="nav-sub-item">Board of Mgt.</li>
<li class="nav-sub-item">Approval & Affiliation</li>
</ul>
</li>
<li class="nav-item">Academic
<ul>
<li class="nav-sub-item">Courses</li>
<li class="nav-sub-item">Department</li>
<li class="nav-sub-item">Syllabus</li>
</ul>
</li>
<li class="nav-item">Admission
<ul>
<li class="nav-sub-item">Procedure</li>
<li class="nav-sub-item">Apply Online</li>
<li class="nav-sub-item">Scholarship</li>
<li class="nav-sub-item">Download Form</li>
<li class="nav-sub-item">Merit</li>
</ul>
</li>
<li class="exam.html">Examination
<ul>
<li class="nav-sub-item">Exam Form</li>
<li class="nav-sub-item">Exam Notice</li>
<li class="nav-sub-item">Admit Card</li>
<li class="nav-sub-item">Verification</li>
</ul>
</li>
<li class="research.html">Research</li>
<li class="facilities.html">Facilities
<ul>
<li class="nav-sub-item">Library</li>
<li class="nav-sub-item">WiFi Campus</li>
<li class="nav-sub-item">Hostel & Cafe</li>
<li class="nav-sub-item">Digitalization</li>
<li class="nav-sub-item">First Aid</li>
<li class="nav-sub-item">Sports</li>
</ul>
</li>
<li>Contact</li>
<li>
<div class="search_button"><i class="fa fa-search" aria-hidden="true"></i></div>
</li>
</ul>
</div>
</div>
</header>
</body>
</html>

Doing a dropdown button in css

I'm trying to incorporate a dropdown button in my website but I don't know why the content of button is not showing correctly:
<body>
<div class="topnav">
<a id="inicio" href="index.php">Inicio</a>
<a id="contacto" href="login.php" >Login</a>
<a id="contacto" href="registro.php">Registro</a>
<a id="contacto" href="#" >Contacto</a>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Iniciar sesion
</div>
</div>
<input type="text" placeholder="Search..">
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</body>
You can try the code here: https://jsfiddle.net/pgn6yw5f/

Set the background color of the dropdown-content a in your CSS-file. below is an example
dropdown-content a {
/* Your other styling */
background-color: inherit;
}
that solves the display issue.

After some search
Here is an example of a drop-down menu using CSS only to improve performance
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
for more examples on CSS only dropdown menus look HERE

color boxes inside select option html

color boxes inside select option in html
i want do it using html and css and without using jquery or javascript
Output should be like this
i have tried
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Dropdown Menu</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#"><span style="background-color:Red"> </span>
Red</a>
<a href="#"> <span style="background-color:Green"> </span> Green
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<span class="color" style="background-color:Red"> </span> Red
<span class="color" style="background-color:Green"> </span> Green
</div>
</div>
but output should display color boxes inside dropdown.
color boxes inside select option html
here i am using anchor tag and div tag in the code i have written.
but i want it in select, option tag

You can't do it without JavaScript - here's some very simple click handlers that do what you want:
function updateColor(element) {
var newColor = element.firstChild.style.backgroundColor;
element.parentElement.parentElement.style.backgroundColor = newColor;
console.log(newColor);
}
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Dropdown Menu</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#" onclick="updateColor(this)"><span style="background-color:Red" onclick="updateColor(this)"> </span>
Red</a>
<a href="#" onclick="updateColor(this)"><span style="background-color:Green"> </span> Green
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div onclick="updateColor(this)"><span class="color" style="background-color:Red"> </span> Red</div>
<div onclick="updateColor(this)"><span class="color" style="background-color:Green" onclick="updateColor(this)"> </span> Green</div>
</div>
</div>

Remove "min-width: 160px;" from .dropdown-content
And
Remove "padding: 12px 16px;" from .dropdown-content a

Dropdown Menu doesn't work inside navigation bar but works outside

I am trying to add a dropdown-menu to my navigation bar. But when i click the dropdown it doesn't show me the menu.It the menu doesn't drop down. I have looked for solutions there are other related questions. But those were code-specific problems are not relevant to my code.
If i test the dropdown code taking it outside of the navgar it works. But inside the navbar it doesn't. Can anyone please help me? If you need help regarding reading this whole or need any kind of explanation, please ask.It is i who needs help.Thanks in advance.
So here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
//This is the part of dropdown//
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
And here is the CSS i am applying to it:
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
body{
background-color:#f1f1f1;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
overflow: hidden;
margin-bottom: 0;
border-radius: 0;
width: 100% ;
height: 30px;
}
.navbarw3 {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main {
margin-top: 40px; Add a top margin to avoid content overlay
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 565px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
And here is the javascript:
<script>
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

Based on your css classes that you used in your HTML, I assue you are using bootstrap. In that case, you really don't need to add any javascript for working with dropdown menu. make sure you linked the bootstrap css and js file in your page and then, just change the html to something like this :
<nav class="navbar justify-content-center navbar-expand-lg blackBg">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery
<span class="caret"></span>
</a>
<ul class="dropdown-menu blackBg">
<li>
Smiles
</li>
<li>
Cry's
</li>
<li>
Videos
</li>
<li>
Choreography
</li>
<li>
</li>
</ul>
</li>
</ul>
here is an example : https://jsfiddle.net/dmkh8xj1/