Drop down only one menu at a time - javascript

So far I have this drop-down menu. When I click on either "Menu", "Menu1" or "Menu2", the links under it will drop down.
The problem:
I need to display only one drop-down at a time, so that the user can switch between them.
I tried to apply css('overflow', 'hidden'); to the menu currently dropped down, but it won't work, since the overflow: visible !important; is applied to the .clicked class.
Please help, anything will be highly appreciated!

Try when you click on a element remove class clicked from all elements and add class clicked to the element that is clicked
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});
DEMO
UPDATE
If you want also on second click menu to be closed try checking if clicked item has already class clicked:
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
if ($(this).hasClass('clicked')) {
$(this).removeClass('clicked')
} else {
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
}
$('.productSubmenu').width(menuWidth);
});
DEMO2

You also might want to close the links
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$("#product-menu .productSubmenu2").hide(); // this one I added
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});

Related

Jquery function add/remove class from div on button hover

I have this jquery script that I got some help with in creating in order to add/remove an "active" class to a div when hovering over a button.
Below a CodePen of what I have put together:
CodePen Link: https://codepen.io/dustin-keeslar/pen/dapLWM
It works well, however what I'm trying to change is to have whatever button was last hovered on, to keep the "active" class on the content. So that the content only changes when a different button is hovered over.
jQuery(document).ready(function() {
jQuery(".toggle-button").hover(function() {
var target = jQuery(this).data("target");
if (jQuery(this).hasClass("expand")) {
jQuery(this).toggleClass("expand");
jQuery("#" + target).removeClass("active");
} else {
jQuery(".toggle-button").removeClass("expand");
jQuery(".hidden-content").removeClass("active");
jQuery(this).toggleClass('expand');
jQuery("#" + target).toggleClass("active");
}
});
});
This will find a button that has data-target=content1" for example, and when it is hovered over it will toggle an "active" class to a div with the ID "content1". The problem is that when you are no longer hovering, everything disappears. I need the most recent hovered button to keep the "active" class on the content. But I also need the content to change dynamically when the next button is hovered over.
Then fix it to use mouseenter, and move your remove code to the top to remove your classes before adding them back to the element that's been entered. I don't understand exactly what you're trying to do here, but using mouseenter it should be something like:
jQuery(document).ready(function() {
jQuery(".toggle-button").mouseenter(function() {
jQuery(".toggle-button").removeClass("expand");
// jQuery(".hidden-content").removeClass("active");
$(".active").removeClass("active");
var target = jQuery(this).data("target");
jQuery("#" + target).addClass("active");
if (jQuery(this).hasClass("expand")) {
jQuery(this).removeClass("expand");
jQuery("#" + target).removeClass("active");
}
});
});
All you are missing is a check, to ensure the current item matches the target:
jQuery(this).attr('id') == target
Codepen here: https://codepen.io/anon/pen/VgKOPy

Javascript - How to remove all active classes unless the element being clicked on already has a active class

const offCanvasLinks = document.querySelectorAll('.off-canvas__link');
[].forEach.call(offCanvasLinks, function(link) {
link.addEventListener('click', (event) => {
const typeVal = link.getAttribute('data-type')
if (typeVal === "star") {
document.querySelector('[data-star-links]').classList.toggle('active');
} else if (typeVal === "how-to") {
document.querySelector('[data-how-to]').classList.toggle('active');
} else {
document.querySelector('[data-presenters]').classList.toggle('active');
}
})
});
I have the above code that clicks on a navigation to toggle a class of active.
If I click on another element in the navigation I need to remove all active classes unless the clicked on element already has a active class.
In Jquery this is super easy with the ability to use .not(). Where you can just past through the event target to check and remove all other active classes.
So to make this more clear what I'm looking for is a way to remove all active classes unless the element being clicked has already got an active class.
Let me know your thoughts
*********** UPDATE ******************
Ok...
Click on a link at the bottom it'll show a screen nicely if you then click on another link it will close the previous one then open the next one. HOWEVER if you click on the same link it does not close the menu.
how do I remove the class if it is already open?
Link: https://jsfiddle.net/2oqm0r2n/3/
maybe something like this?
for example:
// unless the clicked on element has already an active class
if(!link.classList.contains('active')){
// remove all active classes
var actives = document.querySelectorAll('.active');
[].forEach.call(actives, function(elem) {
elem.classList.remove("active");
});
}
If I understand correctly, you want to toggle the active class of the element corresponding to the clicked item, and you want to remove the active class from all other elements.
This you can do as follows:
if (typeVal === containerVal) {
container.classList.toggle('active')
} else {
container.classList.remove('active')
}
See your updated fiddle
Or in one "line":
container.classList.toggle('active', typeVal === containerVal &&
!container.classList.contains('active'));
...in this fiddle

Keep dropdown search box visible by JS

I have expandable search box on toggle click.
I want to change search box to appear on mouse toggle hover, so I changed JS code to this:
jQuery(document).ready(function($) {
$(".search-toggle").hover(function() {
$("#search-container").slideToggle('fast', function() {
$(".search-toggle").toggleClass('active');
});
});
});
But search box disappear immediately when mouse leave toogle - so I can't use search.
Like you asked.
For this to work properly you should have the hover button inside the searchbar container. also check the css i made changes to the opacity and also the width and padding of the searchbar in order to work.
var searchContainer = $("#search-container");
$(".search-toggle").hover(function () {
searchContainer.slideDown('fast');
});
//hide when search button clicked
$('input[type=submit]').on('click', function(){
searchContainer.slideUp('fast');
});
searchContainer.mouseleave(function(){
searchContainer.slideUp();
});
link to your code
Updated Answer:
check here

Switch between two pages with toggleClass

I've got a page with 2 buttons and 2 divs which are hidden.
When you click the first button the first div should appear, and if you click the second button the second div should appear.
I've managed to get that to work, but what I can't get to work is, that if I have the first div open, and click the second button, I would like it to show the second div and close the first div.
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("vis");
$(".hg_facebook").toggleClass("skjul");
});
});
$(document).ready(function() {
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("vis");
$(".hh_facebook").toggleClass("skjul");
});
});
Here is my fiddle:
http://jsfiddle.net/4mWLk/4/
Best regards
Martin
your js code is a bit incorrect.
You call twice $(document).ready(function() { ... Is enough once time.
try this:
$(function(){
$("button.hh").on("click", function(){
$(".hh_facebook").show();
$(".hg_facebook").hide();
});
$("button.hg").on("click", function(){
$(".hh_facebook").hide();
$(".hg_facebook").show();
});
});
see the updated fiddle: http://jsfiddle.net/4mWLk/5/
update if you want to hide div after clicking on same button: http://jsfiddle.net/4mWLk/8/
Use toggle instead of show (for your comment at my answer)
PS: I updated CSS because there was not neccessary.
If you want it with classes so you can have more control over the effect in case you decide to change it later, you should do it like this:
http://jsfiddle.net/4mWLk/7/
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("skjul vis");
$(".hg_facebook").removeClass("vis").addClass("skjul");
});
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("skjul vis");
$(".hh_facebook").removeClass("vis").addClass("skjul");
});
});
Html:
<div class="hh_facebook skjul">test1</div>
<div class="hg_facebook skjul">test2</div>
What it does is like this:
first the divs start with skjul class so they are in hidden state.
when a button is pressed, toggle both the skjul and vis classes (one is removed, the other is added)
make sure the second div is hidden.

Understanding JQuery. Collapsible menu

I have created a collapsible menu in JQuery with the help of some coding I've found around this site.
And everything work. But now it's time for me to understand how and why it works.
The JQuery:
jQuery(document).ready(function($) {
var submenu = $('.submenu').hide();
$('.open').click(function() {
$this = $(this);
$target = $this.parent().next();
if(!$this.hasClass('close')){
$('.open').removeClass('close');
submenu.slideUp();
$this.addClass('close');
$target.slideDown();
}else{
$target.slideUp();
$this.removeClass('close');
}
});
});
The HTML and CSS are in here: JSFIDDLE!
Can someone break the code down for me, and explain what it does.
I know that it hides my .submenu class when the page loads.
And when I click the class .open the .submenu. slides down
But then I am a bit lost to what it does with my .close class.
Thanks in advance!
No problems :)
Let's start with this:
jQuery(document).ready(function($){});
this wraps around all jQuery code. it defines an anonymous function and attaches it to the event $(document).ready meaning - this code runs only after the entire DOM is loaded. This is needed because if the following code will run before the elements were loaded it will have no effect on them,
var submenu = $('.submenu').hide();
This line picks all elements with class="submenu", hides them - and returns an array of all submenus to the submenu variable. The rest of the explanation will be commented on each line:
$('.open').click(function() { // the following code will run if you click an element with class="open"
$this = $(this); // $this will hold the element you clicked
$target = $this.parent().next(); // $target will hold the next element (relevant single submenu)
if(!$this.hasClass('close')){ // if the current element is open (marked by class="closed")
$('.open').removeClass('close'); // remove the "close" class from all main menu items
submenu.slideUp(); // close all submenus
$this.addClass('close'); // add "close" class only to the clicked main menu item
$target.slideDown(); // open the correct submenu (the element after the clicked main menu item)
}else{ // if current submenu is already open
$target.slideUp(); // close it
$this.removeClass('close'); // remove class "close" from the main menu item.
}
});
When user clicks on a menu group, you need to consider two cases:
The clicked menu group is closed (i.e. it doesn't have the close class)
!$this.hasClass('close')
If so, you first have to close all open menus, and set their class accordingly:
$('.open').removeClass('close');
submenu.slideUp();
Then you can expand the clicked menu group, and mark it as currently open:
$this.addClass('close');
$target.slideDown();
The clicked menu group is already open. The only thing that needs to be done in that case is closing the menu:
$target.slideUp();
$this.removeClass('close');

Categories