I want to have a div that is displayed when I click a button.
Right now I am only able to display something that is within the button I will click, like so:
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1
<div class="submenu">
<p> TEST1</p>
</div>
</button>
</div>
<div class="mainmenu">
<button class="btn">2 <div class="submenu">
<p> TEST2</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">3 <div class="submenu">
<p> TEST3</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">4 <div class="submenu">
<p> TEST4</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">5 <div class="submenu">
<p> TEST5</p>
</div></button> </div>
</div>
If I move the div I want to display out of the button, I know that I have to adjust the javascript code to still display the div which is now not in the button anymore. unfortunately I don't know how.
So I am basically trying to display the div (which is working in the first jsfiddle) when clicking a button, but now I want to move the div out of the button. (which I tried in the second jsfiddle)
When I moved the div out of the button the code is not working. I am sure that there is a problem with my javascript but I don't know how to fix that.
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1 </button>
<div class="submenu">
<p> TEST1</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">2</button> <div class="submenu">
<p> TEST2</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">3</button> <div class="submenu">
<p> TEST3</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">4</button> <div class="submenu">
<p> TEST4</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">5</button> <div class="submenu">
<p> TEST5</p>
</div> </div>
</div>
Is it possible to do this and even align the buttons to the right but the div to the left?
Selecting the <p> tag in the CSS is wrong, as you have now moved the div outside so you have to select that like,
.active + .submenu p {
....
}
+ means the element immediately after the specified element but not
inside the particular elements.
Here is your updated code,
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active + .submenu p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1 </button>
<div class="submenu">
<p> TEST1</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">2</button> <div class="submenu">
<p> TEST2</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">3</button> <div class="submenu">
<p> TEST3</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">4</button> <div class="submenu">
<p> TEST4</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">5</button> <div class="submenu">
<p> TEST5</p>
</div> </div>
</div>
Related
I'm using Bootstrap and I get the JavaScript code for the filterable div elements from W3Schools. It's an easy mode to filter but it's a bit bored without animations.
Because of this, I'm trying to add some animations by CSS or js in my filter code and I don't know how to run it. I tried CSS and js animations but nothing, it's not working.
HTML
<div class="container-fluid">
<div id="myBtnContainer">
<ul>
<li class="list-inline-item"><button class="btn active" onclick="filterSelection('all')">All</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category1')">Category1</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category2')">Category2</button></li>
</ul>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 pt-2 pb-5">
<div class="col fade-in-image filterDiv category1 show">
<a href="http://localhost:8888/test01/projects/project1/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img1.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">
<div class="hover-project">
<h3 class="titol-projecte">Project 1</h3>
<p class="location pb-4">Location 1</p>
<p class="category">Category 1</p>
</div>
</div>
</a>
</div>
<div class="col fade-in-image filterDiv category-2 show">
<a href="http://localhost:8888/test01/projects/project2/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img2.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">
<div class="hover-project">
<h3 class="titol-projecte">Project 2</h3>
<p class="location pb-4">Location 2</p>
<p class="category">Category 2</p>
</div>
</div>
</a>
</div>
</div>
</div>
The JavaScript I used:
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
The CSS i used
.filterDiv {
display: none; /* Hidden by default */
visibility: hidden;
opacity: 0;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
visibility: visible;
opacity: 1;
}
Thank you!!
Here is one ready example you can use for your code, its pretty amazing in my opinion
<div class="wrap">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>Filter Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<div class="programs">
<button class="filter-btn" data-filter="all">All</button>
<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>
<button class="filter-btn" data-filter=".phd">PhD</button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<h4>Sort Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<div class="programs">
<button class="sort-btn" data-sort="default:asc">Default</button>
<button class="sort-btn" data-sort="random">Random</button>
<button class="sort-btn" data-sort="order:asc">Ascending</button>
<button class="sort-btn" data-sort="year:desc order:desc">Descending<span
class="multi">(Multi)</span></button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<h4>Programs List</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<ul class="courses" id="mix-wrapper">
<li class="mix-target undergraduate" data-order="5" data-year="4">Economics<span>(U)</span></li>
<li class="mix-target graduate" data-order="14" data-year="2">Pharmacology<span>(G)</span></li>
<li class="mix-target graduate" data-order="7" data-year="1">Informatics<span>(G)</span></li>
<li class="mix-target phd" data-order="4" data-year="3">Criminology<span>(P)</span>
</li>
<li class="mix-target undergraduate" data-order="16" data-year="3">Sociology<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="6" data-year="4">Greek<span>(U)</span></li>
<li class="mix-target phd" data-order="1" data-year="3">Astrophysics<span>(P)</span>
</li>
<li class="mix-target undergraduate" data-order="12" data-year="4">Nursing<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="10" data-year="5">Microbiology<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="9" data-year="4">Mathematics<span>(U)</span></li>
<li class="mix-target graduate" data-order="11" data-year="3">Nanoscience<span>(G)</span></li>
<li class="mix-target phd" data-order="2" data-year="2">Biochemistry<span>(P)</span>
</li>
<li class="mix-target phd" data-order="13" data-year="3">Pathology<span>(P)</span>
</li>
<li class="mix-target graduate" data-order="8" data-year="1">Management<span>(G)</span></li>
<li class="mix-target graduate" data-order="3" data-year="2">Biostatistics<span>(G)</span></li>
<li class="mix-target phd" data-order="15" data-year="4"><a href="#">Public
Health<span>(P)</span></a></li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
#import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
body {
background: #ededed;
font-family: 'Alegreya Sans SC', sans-serif;
}
h4 {
font-size: 21px;
border-radius: 5px;
margin: 0 auto;
text-align: center;
background: #d2d2d2;
color: white;
font-weight: 700;
padding: 3px 0;
}
li {
margin: 0;
}
a {
font-size: 18px;
text-decoration: none;
}
span {
display: block;
font-size: .75em;
font-style: italic;
position: relative;
top: 5px;
}
.multi {
display: inline;
top: 0;
left: 3px;
}
img {
max-width: 100%;
}
.programs,
.courses {
margin: 8px 0 0 0;
}
.programs {
font-size: 0;
margin-bottom: 15px;
}
.programs button {
outline: none;
margin-bottom: 0;
background: whitesmoke;
width: 50%;
height: auto;
font-weight: normal;
border: 1px solid #ededed;
color: #000000;
font-size: 14px;
padding: 4px 0;
text-shadow: 0px 0px 0px #2f6627;
}
.programs button:hover {
background: #99cfe0;
}
.programs button.programs-filter-btn-active,
.programs button.programs-sort-btn-active {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
background: #3a9fbf;
color: white;
}
.courses {
margin-bottom: 15px;
font-size: 0;
background: whitesmoke;
}
.courses li {
text-align: center;
font-size: 14px;
display: inline-block;
width: 46%;
margin: 0 2%;
}
.courses a {
display: block;
height: 60px;
margin: 15px 0;
padding-top: 12.5px;
background: whitesmoke;
color: black;
border: 1px solid white;
transition: all .4s ease;
}
.courses a:hover {
background: #99cfe0;
}
.p, .p a {
font-family: Arial, sans-serif;
font-size: 14px;
text-align: center;
}
/* MEDIA QUERIES STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (min-width: 750px) {
.container {
width: 95%;
}
.courses a {
background: #EBEBEB;
border: none;
}
h4 {
width: 50%;
margin-top: 12px;
}
img {
margin-bottom: 0;
}
.programs {
margin-bottom: 0;
}
.programs button {
width: 25%;
margin-bottom: 15px;
}
.courses li {
width: 21%;
}
}
The JS:
mixitup('#mix-wrapper', {
load: {
sort: 'order:asc'
},
animation: {
effects: 'fade rotateZ(-180deg)',
duration: 700
},
classNames: {
block: 'programs',
elementFilter: 'filter-btn',
elementSort: 'sort-btn'
},
selectors: {
target: '.mix-target'
}
});
I have some divs generated dynamically. Once all the divs are selected submit button has to be enabled, can someone please help me?
let card = document.getElementsByClassName('card');
let allSelected = document.querySelectorAll('selected');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.add('selected');
})
}
.card.selected{
background: #0173fb;
}
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card">
card items
</div>
</li>
</ul>
<button class='btn'>Submit</button>
</section>
let card = document.getElementsByClassName('card');
let allSelected = document.querySelectorAll('selected');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.add('selected');
})
}
In this code I am adding 'selected' class for the div onclick. I want this in pure javascript.. no jquery or any other library.
Thanks in advance.
try like this. Pure javascript.
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName('btn')[0].setAttribute("disabled","true");
});
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
e.target.classList.toggle('selected');
if(card.length === document.getElementsByClassName('selected').length){
btn[0].removeAttribute("disabled");
}
else{
btn[0].setAttribute("disabled","true");
}
})
}
.card{
padding: 8px;
border: 1px solid #eee;
cursor: pointer;
}
ul, li{
list-style: none;
}
.card.selected{
background-color: rgb(155,155,155);
}
.btn{
padding: 10px;
margin: 10px;
}
<body>
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card">
card items 1
</div>
<div class="card">
card items 2
</div>
<div class="card">
card items 3
</div>
</li>
</ul>
<button class='btn'>Submit</button>
</section>
</body>
Or you can add eventListener without for. Like below:
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
document.body.addEventListener('click', function(e) {
if(e.target.classList.contains('card')){
e.target.classList.toggle('selected');
if(card.length === document.getElementsByClassName('selected').length){
btn[0].removeAttribute("disabled");
}
else{
btn[0].setAttribute("disabled","true");
}
}
});
Compare the available divs with the selected divs and enable the button if it matches.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
height: 10px;
background-color: red;
margin-bottom: 10px;
}
.selected{
background-color: blue;
}
</style>
</head>
<body>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<button class="btn" disabled>Click</button>
<script>
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function(e) {
// add seclected class to clicke div
e.target.classList.add('selected');
// get all selected/clicked divs
let allSelected = document.querySelectorAll('.selected');
// compare available divs with selected divs
if(card.length === allSelected.length){
console.log("Enable button", btn[0])
btn[0].onclick = () => {
alert("Button clicked");
};
// enable button
btn[0].disabled = false;
}
});
}
</script>
</body>
</html>
EDIT: Troubleshooting (https://github.com/Bhanumathi-a/cards)
Your problem with your code is that you add the "selected" class on sub elements too! `` When you add a console log on the event handler you see that there are other elements than the divs get selected which gives you the filled array that matches the length of the available divs:
You can clearly see that the array contains more elements than only divs.
To fix this, find the nearest div.card element from the clicked children:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member FDIC</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
min-width: 360px;
}
header {
display: block;
}
a.logo {
display: inline-block;
font-size: 50px;
color: #0173fb;
text-decoration: none;
padding: 15px;
}
nav {
display: inline-block;
}
.loanDetails {
background: #f8f8f8;
display: flex;
}
.cardBlk {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cards {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.cardItm {
display: flex;
padding: 10px;
}
#media(min-width:1240px) {
.container {
max-width: 1140px;
}
.cardItm {
width: 24%;
}
}
#media(min-width:1920px) {
.container {
max-width: 1820px;
}
.cardItm {
width: 33%;
}
}
.card {
background: #f8f8f8;
color: #2a2b2d;
border-radius: 10px;
padding: 15px 15px 30px 15px;
box-sizing: border-box;
width: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center;
cursor: pointer;
justify-content: center;
}
.card .info, .card .checked {
height: 39px;
width: 39px;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50%;
}
.card .info {
background: url(assets/exclamation.png) no-repeat 0 0;
}
.card .checked {
background: url(assets/checked\ active.png) no-repeat 0 0;
}
.card img {
width: auto;
height: auto;
max-width: 50px;
margin: 25px auto;
}
.card.selected, .card:hover {
background: #0173fb;
color: #fff;
}
.card:hover .info, .card.selected .info {
background-image: url(assets/exclamation\ white.png);
}
.card:hover .checked, .card.selected .checked {
background-image: url(assets/checked\ inactive.png);
}
.btnBlk {
text-align: center;
display: block
}
.btn {
background: #0173fb;
border-radius: 25px;
padding: 10px 25px;
color: #fff;
text-align: center;
border: 1px solid #0173fb;
margin: 10px auto;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
}
.btn:disabled {
background: #9ac5fb;
border-color: #9ac5fb;
cursor: default;
}
</style>
</head>
<body>
<header>
<div class="container">
Logo
<!-- <nav class="nav">
<ul>
<li>Dashboard</li>
<li>Welcome, John Doe</li>
</ul>
</nav> -->
</div>
</header>
<main>
<header class="loanDetails">
<div class="container">
loan
<progress value="30" max="100" id=progress>30%</progress>
</div>
</header>
<section class='container'>
<ul class="cards">
<li class="cardItm">
<div class="card 1">
<span class="checked"></span>
<img src="assets/location.png" alt="">
<div>
<h2>Get started</h2>
<span>(100% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card 2">
<span class="info"></span>
<img src="assets/property.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="info"></span>
<img src="assets/income.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/assets.png" alt="">
<div>
<h2>Get started</h2>
<span>(50% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/real estate.png" alt="">
<div>
<h2>Get started</h2>
<span>(70% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="info"></span>
<img src="assets/declarations.png" alt="">
<div>
<h2>Get started</h2>
<span>(90% completed)</span>
</div>
</div>
</li>
<li class="cardItm">
<div class="card">
<span class="checked"></span>
<img src="assets/e-concent.png" alt="">
<div>
<h2>Get started</h2>
<span>(Not Started)</span>
</div>
</div>
</li>
</ul>
<div class="btnBlk">
<button class="btn" id="submitBtn" disabled>Submit Application</button>
</div>
</section>
</main>
<footer>
</footer>
<script>
let card = document.getElementsByClassName('card');
let btn = document.getElementsByClassName('btn');
let progress = document.getElementById('progress');
for (var i = 0; i < card.length; i++) {
card[i].addEventListener('click', function (e) {
let closest = e.target.closest("div.card");
closest.classList.add('selected');
progress.value = progress.value + 10;
let allSelected = document.querySelectorAll('div.selected');
if (card.length === allSelected.length) {
btn[0].onclick = () => {
console.log('clicked');
};
btn[0].disabled = false;
}
});
}
</script>
</body>
</html>
I have two dropdown menus which are displayed when the user clicks them. They are hidden by default. Is there a way to close the dropdown which is not being clicked?. For example the 'client' menu should be closed once I click the 'car' menu.
/* display the dropdown when client, vehcile or module are clicked */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content */
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block")
dropdownContent.style.display = "none";
else
dropdownContent.style.display = "block";
});
}
.dropdown-btn {
border: none;
background: none;
cursor: pointer;
outline: none;
text-transform: uppercase;
font-family: LinetoCircular;
display: block;
padding-left: 20px;
z-index: 0;
}
#wrapper {
display: flex;
}
/* hidden by default, make the content shifts under the title */
.dropdown-container {
display: none;
font-size: 18px;
padding-top: 10px;
background-color: #575757;
}
.dropdown-container a {
color: white;
padding-left: 30px;
}
.dropdown-container a:hover {
background-color: #414141;
}
<div>
<button class="dropdown-btn">
<div>Client</div>
</button>
<div class="dropdown-container">
<span style="font-size: 24px;">+</span>Add new<br>
<a href=''>first element</a><br>
<a href=''>second element</a><br>
</div>
<div>
<button class="dropdown-btn">
<div>Car</div>
</button>
<div class="dropdown-container">
<span style="font-size: 24px;">+</span>Add new<br>
<a href=''>first element</a><br>
<a href=''>second element</a><br>
</div>
</div>
</div>
If there is a possible way to not change a lot in the code, that would be appreciated.
Live demo: https://jsfiddle.net/2c9pbyvo/1/
To do what you require, loop through all the .dropdown-btn elements and hide the ones which are not relevant to the clicked button:
Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
if (el !== dropdownContent)
el.style.display = 'none';
});
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
var dropdownContent = this.nextElementSibling;
Array.from(document.querySelectorAll('.dropdown-container')).forEach(el => {
if (el !== dropdownContent)
el.style.display = 'none';
});
if (dropdownContent.style.display === "block")
dropdownContent.style.display = "none";
else
dropdownContent.style.display = "block";
});
}
.dropdown-btn {
border: none;
background: none;
cursor: pointer;
outline: none;
text-transform: uppercase;
font-family: LinetoCircular;
display: block;
padding-left: 20px;
z-index: 0;
}
#wrapper {
display: flex;
}
/* hidden by default, make the content shifts under the title */
.dropdown-container {
display: none;
font-size: 18px;
padding-top: 10px;
background-color: #575757;
}
.dropdown-container a {
color: white;
padding-left: 30px;
}
.dropdown-container a:hover {
background-color: #414141;
}
<div>
<button class="dropdown-btn">
<div>Client</div>
</button>
<div class="dropdown-container">
<span style="font-size: 24px;">+</span>Add new<br>
<a href=''>first element</a><br>
<a href=''>second element</a><br>
</div>
<div>
<button class="dropdown-btn">
<div>Car</div>
</button>
<div class="dropdown-container">
<span style="font-size: 24px;">+</span>Add new<br>
<a href=''>first element</a><br>
<a href=''>second element</a><br>
</div>
</div>
</div>
i have some basic html/css tabs and i want want to move tab to next by clicking a link at bottom of every tab.
HTML
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
</ul>
Jquery for this is
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
});
it is working fine for me now as i click on tab its changes.
Live demo
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
});
.coltab{
height: 51vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tabs {
margin: 0;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.tabs li {
display: table-cell;
margin: 0;
padding: 0;
list-style: none;
border-right: 1px solid #000;
}
.tabs li>a {
display: block;
font-weight: bold;
text-align: center;
padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
background-color: #D3D3D3;
}
.tabs li .content {
display: none;
}
.tabContent {
padding: 15px 15px 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
<li>
Special Offer
<div class="content">
<div class="coltab">
Content C
</div>
<h4>Next tab: To Register and Subscribe>>></h4>
</div>
</div>
</li>
<li>
Subscribe
<div class="content coltab">
<div>
Content D
</div>
<div>
<h4>Next tab: To Request a callback</h4>
</div>
</div>
</li>
<li>
Request a Callback
<div class="content coltab">
<div>
Content E
</div>
<h4>Next tab: Reviews</h4>
</div>
</div>
</div>
</li>
<li>
Reviews
<div class="content">
<div>
Content F
</div>
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>
You can add this code:
$("h4").click(function(){
var activeTab = $("ul.tabs > li.active");
var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
nextTab.find("a").trigger("click")
});
it will allow you to click on the h4 aka next and move to the next content
Working demo
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
$("h4").click(function(){
var activeTab = $("ul.tabs > li.active");
var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
nextTab.find("a").trigger("click")
});
});
.coltab{
height: 51vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tabs {
margin: 0;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.tabs li {
display: table-cell;
margin: 0;
padding: 0;
list-style: none;
border-right: 1px solid #000;
}
.tabs li>a {
display: block;
font-weight: bold;
text-align: center;
padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
background-color: #D3D3D3;
}
.tabs li .content {
display: none;
}
.tabContent {
padding: 15px 15px 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
<li>
Special Offer
<div class="content">
<div class="coltab">
Content C
</div>
<h4>Next tab: To Register and Subscribe>>></h4>
</div>
</div>
</li>
<li>
Subscribe
<div class="content coltab">
<div>
Content D
</div>
<div>
<h4>Next tab: To Request a callback</h4>
</div>
</div>
</li>
<li>
Request a Callback
<div class="content coltab">
<div>
Content E
</div>
<h4>Next tab: Reviews</h4>
</div>
</div>
</div>
</li>
<li>
Reviews
<div class="content">
<div>
Content F
</div>
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>
I am using materialize css and on a navbar I have a dropdown that opens on mouse over on the icon more vert (on the example on the right hand side).
When I click on the link within the dropdown, the target fires correctly, but the dropdown does not close.
Working example here. I would like the dropdown menu to close automatically after it has being clicked. Below my html code:
<ul id="dropdown1" class="dropdown-content collection">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<nav class="blue darken-3">
<div class="nav-wrapper">
<ul id="tabs" class="left">
<li><b>Item 1</b></li>
<li><b>Item 2</b></li>
</ul>
<ul class="right">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><i class="material-icons tiny">more_vert</i></a></li>
</ul>
</div>
</nav>
<div id="1" class="tabcontent_gfs">
content 1 here
</div>
<div id="2" class="tabcontent_gfs">
content 2 here
</div>
and here the javascript
(function($) {
$(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
hover: true, // Activate on hover
belowOrigin: true, // Displays dropdown below the button
alignment: 'right' // Displays dropdown with edge aligned to the left of button
}
);
}); // End Document Ready
})(jQuery); // End of jQuery name space
var currentTabGFS = null;
function openGFS(evt, tabName, ThirdValue) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent_gfs");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
var text = document.getElementById(tabName);
text.innerHTML = text.innerHTML.replace('{var}',tabName);
currentTabGFS = tabName;
}
document.getElementById("defaultOpenGFS").click();
function dismissGFS(){
document.getElementById(currentTabGFS).style.display='none';
};
and part of the css:
<style class="cp-pen-styles">
.dropdown-content {
background-color: #FFFFFF;
margin: 0;
display: none;
min-width: 350px;
height: 120px;
max-height: auto;
margin-left: -1px;
overflow: auto;
opacity: 0;
position: absolute;
white-space: nowrap;
z-index: 1;
will-change: width, height;
}
</style>
Per the materialize dropdown docs, you can use $('.dropdown-button').dropdown('close'); in your click handler for those links, but you need to upgrade materialize because your current version doesn't support it.
(function($) {
$(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
hover: true, // Activate on hover
belowOrigin: true, // Displays dropdown below the button
alignment: 'right' // Displays dropdown with edge aligned to the left of button
});
}); // End Document Ready
})(jQuery); // End of jQuery name space
var currentTabGFS = null;
function openGFS(evt, tabName, ThirdValue) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent_gfs");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
var text = document.getElementById(tabName);
text.innerHTML = text.innerHTML.replace('{var}', tabName);
currentTabGFS = tabName;
$('.dropdown-button').dropdown('close');
}
document.getElementById("defaultOpenGFS").click();
function dismissGFS() {
document.getElementById(currentTabGFS).style.display = 'none';
};
body {
font-family: "Lato", sans-serif;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 0px 0px;
border: 0px solid #ccc;
border-top: none;
}
/* Style the close button */
.topright {
float: right;
cursor: pointer;
font-size: 20px;
}
.topright:hover {
color: red;
}
nav .nav-wrapper i.material-icons {
height: 48px;
line-height: 48px;
}
nav ul a {
font-size: 2.1rem;
color: #FFF;
}
nav,
nav .nav-wrapper i,
nav a.button-collapse,
nav a.button-collapse i {
height: 75px;
line-height: 75px;
}
</style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> <style class="cp-pen-styles"> .dropdown-content {
background-color: #FFFFFF;
margin: 0;
display: none;
min-width: 350px;
height: 120px;
max-height: auto;
margin-left: -1px;
/* Add this to keep dropdown in line with edge of navbar */
/* overflow: hidden;*/
/* Changed this from overflow-y:auto; to overflow:hidden; */
overflow: auto;
opacity: 0;
position: absolute;
white-space: nowrap;
z-index: 1;
will-change: width, height;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<ul id="dropdown1" class="dropdown-content collection">
<li>Item 1
<label>
<input type="checkbox"><span class="lever"></span></label>
</li>
<li>Item 2
<label>
<input type="checkbox"><span class="lever"></span></label>
</li>
</ul>
<nav class="blue darken-3">
<div class="nav-wrapper">
<ul id="tabs" class="left">
<li><b>Item 1</b></li>
<li><b>Item 2</b></li>
</ul>
<ul class="right">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1"><i class="material-icons tiny">more_vert</i></a></li>
</ul>
</div>
</nav>
<div id="1" class="tabcontent_gfs">
content 1 here
</div>
<div id="2" class="tabcontent_gfs">
content 2 here
</div>