There are multiple dropdowns, in this case three (but could be any number), which have toggleable dropdowns. However, if you click on all of them, they will all remain opened. How could I make it close when the other one is activated, and when there's an outside click?
Fiddle: https://jsfiddle.net/pcm2w3ov/1/
for (const button of document.querySelectorAll('button')) {
button.addEventListener('click', (e) => {
button.nextElementSibling.classList.toggle("dropdown-visible");
});
}
.container {
display: flex;
}
.box {
height: 100px;
width: 100px;
position: relative;
margin-right: 20px;
}
.dropdown {
height: 100px;
width: 100%;
position: absolute;
background: red;
top: 100%;
right: 0;
display: none;
}
.dropdown-visible {
display: block;
}
<div class="container">
<div class="box">
box 1
<button>toggle</button>
<div class="dropdown">dropdown content</div>
</div>
<div class="box">
box 2
<button>toggle</button>
<div class="dropdown">dropdown content</div>
</div>
<div class="box">
box 3
<button>toggle</button>
<div class="dropdown">dropdown content</div>
</div>
</div>
There's two parts to the problem. To toggle the current dropdown whilst hiding the others you can select them all and use filter() to exclude the current dropdown whilst hiding all the others.
To hide all the dropdowns when the click occurs outside the button or .dropdown elements you can bind an event handler to the document which checks the event to see from where it originated. Then you can either ignore the event, if the user clicked on a button or dropdown, or hide all dropdowns if the user clicked outside of those elements.
let buttons = document.querySelectorAll('button');
let dropdowns = document.querySelectorAll('.dropdown');
// toggle dropdowns
buttons.forEach(button => button.addEventListener('click', e => {
let targetDropdown = e.target.nextElementSibling;
Array.from(dropdowns).filter(dd => dd != targetDropdown).forEach(dd => dd.classList.remove('dropdown-visible'));
targetDropdown.classList.toggle('dropdown-visible');
}));
// hide dropdowns when click occurs on external element
document.addEventListener('click', e => {
if (e.target.classList.contains('dropdown') || e.target.tagName === 'BUTTON')
return;
dropdowns.forEach(dd => dd.classList.remove('dropdown-visible'));
});
.container {
display: flex;
}
.box {
height: 100px;
width: 100px;
position: relative;
margin-right: 20px;
}
.dropdown {
height: 100px;
width: 100%;
position: absolute;
background: red;
top: 100%;
right: 0;
display: none;
}
.dropdown-visible {
display: block;
}
<div class="container">
<div class="box">
box 1
<button>toggle</button>
<div class="dropdown">dropdown content</div>
</div>
<div class="box">
box 2
<button>toggle</button>
<div class="dropdown">dropdown content</div>
</div>
<div class="box">
box 3
<button>toggle</button>
<div class="dropdown">dropdown content</div>
</div>
</div>
Related
So what I'm trying to make is a map of Germany with markers.
and when clicked on a marker a div (content) will show with some things in it
is there a way to let JavaScript know which marker I clicked and it will open the corresponding content div, in total it will be about 200 markers so it must be a decently efficient code and my knowledge about JavaScript is not that great
this is the code I have for now
<div class="map">
<img src="/images/map.jpg">
</div>
<div class="markers" style="top: 60%; left: 35%;">
<div class="content" style="display: none;">
<h1>Test</h1>
<p>test</p>
</div>
</div>
<div class="markers" style="top: 20%; left: 60%;">
<div class="content" style="display: none;">
<h1>Test2</h1>
<p>test2</p>
</div>
</div>
Basic idea is using event delegation and listen to the click on the parent. You can than determine what was clicked and you can toggle a class to show the hidden element. Basic idea:
document.querySelector(".map-wrapper").addEventListener("click", function (e) {
// find if a marker was clicked
var marker = e.target.closest('.marker');
console.log(marker)
// was one clicked?
if (marker) {
// Hide any others that may be showing
var active = document.querySelector('.marker.active');
if(active && active!==marker) {
active.classList.remove('active');
}
// toggle the info so it shows/hides
marker.classList.toggle('active');
}
});
.map-wrapper {
position: relative;
background-color: #CCCCCC;
width: 400px;
height: 400px;
}
.marker {
position: relative;
}
.marker::after {
content: '🚻';
}
.marker .content {
display: none;
opacity: 0;
}
.marker.active .content {
position: absolute;
display: block;
opacity: 1;
transition: opacity 0.3s;
background-color: #CCFF00;
border: 2px solid red;
margin: 20px;
}
<div class="map-wrapper">
<div class="marker" style="left:100px; top: 100px;">
<div class="content">
<h1>Test1</h1>
<p>test1</p>
</div>
</div>
<div class="marker" style="left:150px; top: 270px;">
<div class="content">
<h1>Test2</h1>
<p>test2</p>
</div>
</div>
<div class="marker" style="left: 46px; top: 143px;">
<div class="content">
<h1>Test3</h1>
<p>test3</p>
</div>
</div>
</div>
There is no need to add any IDs or other means to identify the correct .content to show.
Add a click event listener to each marker and toggle a class on the element. The rest can be done with CSS.
// Find all of the .markers elements
const markers = document.querySelectorAll('.markers');
// Loop through the .markers
markers.forEach((marker) => {
// Add event listener to each .marker
marker.addEventListener('click', (e) => {
if (e.currentTarget.classList.contains('active')) {
// If the clicked element is active, deactivate it...
e.currentTarget.classList.remove('active');
} else {
// ...otherwise, deactivate any other active .markers...
removeClass(markers, 'active');
// ...and activate the clicked .marker
e.currentTarget.classList.add('active');
}
})
});
// Helper function to remove a class from a collection of elements
function removeClass(els, className) {
els.forEach((el) => {
el.classList.remove(className);
});
}
.markers {
border: 1px solid #e6e6e6;
}
.markers .content {
display: none;
}
.markers.active .content {
display: block;
}
<div class="markers" style="top: 60%; left: 35%;">
<p>
Marker 1
</p>
<div class="content">
<h1>Test</h1>
<p>test</p>
</div>
</div>
<div class="markers" style="top: 20%; left: 60%;">
<p>
Marker 2
</p>
<div class="content">
<h1>Test2</h1>
<p>test2</p>
</div>
</div>
i have a toggle button to allow user to select 1 or 2 rows
So when user click on the id it will remove or add the class and show diferents rows, so i need to add an opacity on the toggle button, how?, i need to show an opacity on the actual selected toggle button.
jQuery("#one-row").click(function () {
$('.product-list').removeClass('-two-columns');
$('.product-list').addClass('-one-columns');
});
jQuery("#two-rows").click(function () {
$('.product-list').removeClass('-one-columns');
$('.product-list').addClass('-two-columns');
});
.toggle-one{
background-image: url(images/toggle_1.svg);
width: 30px;
height: 10px;
float: right;
display: inline-block;
cursor: pointer;
}
.toggle-two{
background-image: url(images/toggle_2.svg);
width: 30px;
height: 10px;
float: right;
display: inline-block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-rows" style="top: 118px;
right: 30px;
position: absolute;">
<nav>
<ul>
<li style="display: inline-block;">
<div class="toggle-one " id="onw-row">
</div>
</li>
-
<li style="display: inline-block;">
<div class="toggle-two" id="two-rows">
</div>
</li>
</ul>
</nav>
</div>
I'd say, add two lines each for the buttons similar to this:
jQuery("#one-row").click(function () {
$('.product-list').removeClass('-two-columns');
$('.product-list').addClass('-one-columns');
$("#one-row").css("opacity", "1");
$("#two-rows").css("opacity", "0.3");
});
jQuery("#two-rows").click(function () {
$('.product-list').removeClass('-one-columns');
$('.product-list').addClass('-two-columns');
$("#one-row").css("opacity", ".0.3");
$("#two-rows").css("opacity", "1");
});
OK. It won't take anybody long to work out that I am learning jQuery here and might have gone about this in THE most cack-handed way possible. That's why I'm here though.
I have been creating a "panel" based menu system that provides a number of different functions (menu, filter, search, basket and account). I have it 99% where I want to be. Indeed if you click on the menu icon (as an example) you will see the exact effect. Click it again and everything is perfect.
My problem comes when the user clicks on another icon with their initial "panel" open. Now you can see the gaps in my knowledge.
Please note the effect is on a different div for the panel and on the same div each time (main). Naturally it would be best if either:
a) when clicking on a new icon without closing a panel the jQuery closes the previous panel, removes the close-btn, slides back the main and then opens fires the new panel.
or
b) it closes the previous panel, removes the close-btn but keeps the main open (I think this is over complicating).
HTML
<div id="mainpanel">
<div class="menunav">
<div class="toggle menu-btn"></div>
<div class="toggle filter-btn"></div>
<div class="toggle search-btn"></div>
<div class="toggle basket-btn"></div>
<div class="toggle account-btn"></div>
</div>
</div>
<div class="togglepanel mainmenu">
menu here
</div>
<div class="togglepanel filter">
filter here
</div>
<div class="togglepanel search">
search here
</div>
<div class="togglepanel basket">
basket here
</div>
<div class="togglepanel account">
account here
</div>
<main>
content will be here
</main>
CSS
#mainpanel {
position: fixed;
display: table;
top: 0;
left: 0;
width: 125px;
height: 100%;
background: #206ba4;
vertical-align: middle;
z-index: 9999;}
main {
position: relative;
top: 0;
margin-left: 125px;
transform: translateX(0);
transform: translateY(0);
transition: transform .5s;}
.move {
transform: translateX(300px) !important;}
.menunav {
display: table-cell;
color: #fff;
z-index: 1001;
margin: 20px 0 0;
text-align: center;
vertical-align: middle;}
.menunav div {
display: block;
width: 100%;
margin: 0 0 30px;
text-align: center;}
.menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after {
font-family: FontAwesome;
content: "menu";
font-size: 1.8em;
font-weight: 200;
color: #fff;
display: block;
height: 1em;
width: 1em;
margin: 0 0 0 30%;
cursor: pointer;}
.filter-btn:after {
content: "filter";}
.search-btn:after {
content: "search";}
.basket-btn:after {
content: "basket";}
.account-btn:after {
content: "account";}
.close-btn:after {
content: "close";}
.mainmenu, .filter, .search, .basket, .account {
position: fixed;
width: 300px;
top: 0;
left: 125px;
height: 100%;
background: #54a4de;
transform: translateX(-100%);
transition: transform .5s;
z-index: -1;}
.expand {
transform: translateX(0px);}
jQuery
jQuery(function($){
$('.menu-btn').click(function(){
$('.mainmenu').toggleClass('expand')
$('main').toggleClass('move')
$('.menu-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.filter-btn' ).click(function(){
$('.filter').toggleClass('expand')
$('main').toggleClass('move')
$('.filter-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.search-btn' ).click(function(){
$('.search').toggleClass('expand')
$('main').toggleClass('move')
$('.search-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.basket-btn' ).click(function(){
$('.basket').toggleClass('expand')
$('main').toggleClass('move')
$('.basket-btn').toggleClass('close-btn')
})
})
jQuery(function($){
$( '.account-btn' ).click(function(){
$('.account').toggleClass('expand')
$('main').toggleClass('move')
$('.account-btn').toggleClass('close-btn')
})
})
Here is the jsfiddle
Many thanks, in advance, for any pointers....my head hurts!
DEMO HERE
Many redundant code in your attempt, but still a good attempt to achieve this. So below are my suggestions to achieve this.
Tips:
Do not include multiple jQuery(function as this is equivalent to $(document).ready function and its good if you have only one per
js file
Write a single common event to all the buttons and differentiate based on $(this) for each click that happens
Add an extra data-* attribute to your .toggle element, say here data-target, to target its corresponding panel-body
So below are some changes I made to your code..
HTML
<div class="menunav">
<!--data-target to each of its corresponding body class-->
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
</div>
JS
jQuery(function($){
//click event to one common class i.e toggle
$('.toggle').click(function(){
var target=$(this).data('target'); //get the clicked element's target property
$('.togglepanel').not($(target)).removeClass('expand');
//remove class from all the togglepanel elements except the current element's target
$('.toggle').removeClass('close-btn');
//general action in any scenario to remove close-btn
if($(target).hasClass('expand'))
{
//if target has expand class then remove it and do necessary changes
$(target).removeClass('expand')
$('main').removeClass('move')
$(this).removeClass('close-btn')
}
else
{
//else add necessary classes
$(target).addClass('expand')
$('main').addClass('move')
$(this).addClass('close-btn')
}
})
})
jQuery(function($){
$(document).on('click', '.toggle', function (){
// to close all open contents
$('.togglepanel').removeClass('expand');
$('main').removeClass('move');
var target = $(this).data("target");
if( $(this).hasClass('close-btn') ){
$('.toggle').toggleClass('close-btn', false);
$('main').toggleClass('move', false)
$(target).toggleClass('expand', false);
}else{
$('.toggle').toggleClass('close-btn', false);
$(this).toggleClass('close-btn', true);
$('main').toggleClass('move', true)
$(target).toggleClass('expand', true);
}
});
})
#mainpanel {
position: fixed;
display: table;
top: 0;
left: 0;
width: 125px;
height: 100%;
background: #206ba4;
vertical-align: middle;
z-index: 9999;
}
main {
position: relative;
top: 0;
margin-left: 125px;
transform: translateX(0);
transform: translateY(0);
transition: transform .5s;
}
.move {
transform: translateX(300px) !important;
}
.menunav {
display: table-cell;
color: #fff;
z-index: 1001;
margin: 20px 0 0;
text-align: center;
vertical-align: middle;
}
.menunav div {
display: block;
width: 100%;
margin: 0 0 30px;
text-align: center;
}
.menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after {
font-family: FontAwesome;
content: "menu";
font-size: 1.8em;
font-weight: 200;
color: #fff;
display: block;
height: 1em;
width: 1em;
margin: 0 0 0 30%;
cursor: pointer;
}
.filter-btn:after {
content: "filter";
}
.search-btn:after {
content: "search";
}
.basket-btn:after {
content: "basket";
}
.account-btn:after {
content: "account";
}
.close-btn:after {
content: "close";
}
}
.close-btn:after {
content: "\f00d";
}
.mainmenu, .filter, .search, .basket, .account {
position: fixed;
width: 300px;
top: 0;
left: 125px;
height: 100%;
background: #54a4de;
transform: translateX(-100%);
transition: transform .5s;
z-index: -1;
}
.expand {
transform: translateX(0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainpanel">
<div class="menunav">
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
</div>
</div>
<div class="togglepanel mainmenu">
menu here
</div>
<div class="togglepanel filter">
filter here
</div>
<div class="togglepanel search">
search here
</div>
<div class="togglepanel basket">
basket here
</div>
<div class="togglepanel account">
account here
</div>
<main>
content will be here
</main>
You are actually doing a lot of codes which can be converted to a single line.
Instead of adding a click event on each buttons, try something like this:
First, add a data-target attribute to your buttons, something like:
<div class="toggle menu-btn" data-target=".mainmenu"></div>
<div class="toggle filter-btn" data-target=".filter"></div>
<div class="toggle search-btn" data-target=".search"></div>
<div class="toggle basket-btn" data-target=".basket"></div>
<div class="toggle account-btn" data-target=".account"></div>
And on your jQuery:
jQuery(function($){
$(document).on('click', '.toggle', function (){
// to close all open contents
$('.togglepanel').removeClass('expand');
$('main').removeClass('move');
var target = $(this).data("target");
if( $(this).hasClass('close-btn') ){
$('.toggle').toggleClass('close-btn', false);
$('main').toggleClass('move', false)
$(target).toggleClass('expand', false);
}else{
$('.toggle').toggleClass('close-btn', false);
$(this).toggleClass('close-btn', true);
$('main').toggleClass('move', true)
$(target).toggleClass('expand', true);
}
});
});
I've build a tab Container with multiple Tabs and corresponding content, which is only visible if the corresponding Tab is clicked. This works great so far, but I have tried to add two buttons which will navigate to the next and previous tab and I don't know how to achieve this.
You'll find below what I've done so far. I think it's no so good JS code, maybe someone can give me also some hint's to improve it.
Thanks in advance for your help
$(document).ready(function(){
// hide all contents accept from the first div
$('.tabContent div:not(:first)').toggle();
// hide the previous button
$('.previous').hide();
$('.tabs li').click(function () {
if($(this).is(':last-child')){
$('.next').hide();
}else{
$('.next').show();
}
if($(this).is(':first-child')){
$('.previous').hide();
}else{
$('.previous').show();
}
var position = $(this).position();
var corresponding = $(this).data("id");
// scroll to clicked tab with a little gap left to show previous tabs
scroll = $('.tabs').scrollLeft();
$('.tabs').animate({'scrollLeft': scroll+position.left-30},200);
// hide all content divs
$('.tabContent div').hide();
// show content of corresponding tab
$('div.' + corresponding).toggle();
// remove active class from currently not active tabs
$('.tabs li').removeClass('active');
// add active class to clicked tab
$(this).addClass('active');
});
});
body{
background-color: gray;
}
*{
box-sizing: border-box;
}
.contentWrapper{
width: 350px;
margin: 0 auto;
position: relative;
}
.tabsWrapper{
width: 100%;
height: 24px;
overflow: hidden;
position: relative;
}
.tabs{
margin: 0;
padding: 0;
position: absolute;
top: 0;
bottom: -25px;
left: 0;
right: 0;
white-space: nowrap;
overflow: auto;
}
.tabs li{
display: inline-block;
background-color: #ccc;
padding: 3px 8px;
cursor: pointer;
}
.tabs li.active{
background-color: white;
}
.next, .previous{
position: absolute;
padding: 2px 4px;
top: 0;
background-color: white;
}
.next{
right: -25px;
}
.previous{
left: -25px;
}
.tabContent{
width: 100%;
background-color: white;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentWrapper">
<div class="tabsWrapper">
<ul class="tabs">
<li data-id="contentOne" class="active">CSS</li>
<li data-id="contentTwo">HTML, HTML, HTML</li>
<li data-id="contentThree">JS and jQuery</li>
<li data-id="contentFour">one more tab</li>
<li data-id="contentFive">another tab</li>
<li data-id="contentSix">the last tab</li>
</ul>
</div>
<a class="next">></a>
<a class="previous"><</a>
<div class="tabContent">
<div class="contentOne">
<p>this is the CSS tab Content</p>
next
</div>
<div class="contentTwo">
<p>this is the HTML tab Content<br><br>1</p>
next
</div>
<div class="contentThree">
<p>this is the JS tab Content</p>
next
</div>
<div class="contentFour">
<p>this is the sample Content</p>
next
</div>
<div class="contentFive">
<p>this is more sample Content</p>
next
</div>
<div class="contentSix">
<p>this is more than more sample Content</p>
next
</div>
</div>
</div>
You can use trigger('click') to programmatically click the tab you want. This way all the code written for tab change will automatically get executed. For example see the following code:
$('div a').click(function(e){
e.preventDefault();
$('li.active').next('li').trigger('click');
});
See JsFiddle here
I have created a navigation based on expandable and closable divs, the autoclose and open works but there is always a invisable div present that takes up space. Also when reclicking a menu item should close the div. Tried different closing methods but it wont let me.
Here is what I got so far:
HTML
<div class="secondtopdiv">
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div></div>
<div id="navcontent">
<div class="panel" id="target1">Target 1</div>
<div class="panel" id="target2">Target 2</div>
<div class="panel" id="target3">Target 3</div>
</div>
</div>
^^^^^^^^^^UNWANTED SPACE FROM DIV NAVCONTENT, MUST PUSH MAIN CONENT DOWN INSTEAD OF ALWAYS BEING THERE
<div class="spacerdiv"></div>
<div class="containerdiv">
<div class="maindiv">
<div class="divtitle">
Title
</div>
<center>Some div in main page</center>
</div>
CSS
.containerdiv
{
min-width:400px;
max-width:500px;
overflow:hidden;
display:block;
margin-left:auto;
margin-right: auto;
}
.secondtopdiv
{
width: 100%;
height: 100px;
background: #61c5bb;
color:#000000;
vertical-align: middle;
line-height: 100px;
}
#nav{
width: 100%;
overflow: hidden;
}
#navcontent {
position: relative;
float: left;
width: 100%;
min-height: 100px;
overflow: hidden;
}
.spacerdiv
{
height:20px;
}
.divtitle {
font-size: 18px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
div.panel {
position: absolute;
background: #61c5bb;
height: 100%;
width: 100%;
display: none;
}
Jquery/JS:
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
top: -($target.height())
}).animate({
top: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
top: -$this.height()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
Link to fiddle: http://jsfiddle.net/6swdzycc/10/
If i understood correctly, you remove the min-width from #navcontent and can use the following script:
jQuery(function ($) {
$('a.panel').click(function () {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if ($other.length) $other.removeClass("active").slideUp("slow", function () {
$target.toggleClass("active").slideToggle("slow");
})
else $target.toggleClass("active").slideToggle("slow");
});
});
JSFiddle
div.panel1 {
background: #61c5bb;
height: 150px;
width: 100%;
display: none;
}
<div class="containerdiv">
<div id="nav">
Target 1
Target 2
Target 3
</div>
</div>
<div id="navcontent">
<div class="panel1" id="target1">Target 11111</div>
<div class="panel1" id="target2">Target 21111</div>
<div class="panel1" id="target3">Target 31111</div>
</div>
<script>
$('document').ready(function(){
$('.panel').click(function(){
var thisHref=$(this).attr('href');
$('.panel1').hide();
$(thisHref).slideToggle('slow');
});
});
</script>