Looking at show / hide div dropdown links. I've found a pen of what i'm trying to do. I would like the active div to close automatically when another link is clicked and opened. At the moment the user must close the active div before viewing another. I'm new to JS so any help is appreciated.
Link to codepen
$(document).ready(function() {
/* hide all content divs */
$('.toggle-content').hide();
$('.toggle-trigger').click(function() {
/* if the clicked item is active*/
if ($('.toggle-trigger').hasClass('active')) {
/* hide the next content div*/
$(this).next('.toggle-content').slideUp();
/* and remove the active class*/
$(this).toggleClass('active');
}
/* if the cliked item is NOT active */
else {
/* slide the content div dwon */
$(this).next('.toggle-content').slideDown();
/* and add the active class*/
$(this).toggleClass('active');
}
});
});
$(document).ready(function() {
$('div.dropdown').each(function() {
var $dropdown = $(this);
$("a.dropdown-link", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.dropdown-container", $dropdown);
$div.toggle();
$("div.dropdown-container").not($div).hide();
return false;
});
});
$('html').click(function() {
$("div.dropdown-container").hide();
});
});
When a tap is clicked you could iterate over all other taps and close them if active:
$(document).ready(function() {
/* hide all content divs */
$('.toggle-content').hide();
$('.toggle-trigger').click(function() {
/* close all other taps but not current clicked tap */
closeActiveTap(this);
/* if the clicked item is active*/
if ($(this).hasClass('active')){
/* hide the next content div*/
$(this).next('.toggle-content').slideUp();
/* and remove the active class*/
$(this).toggleClass('active');
}
/* if the cliked item is NOT active */
else {
/* slide the content div dwon */
$(this).next('.toggle-content').slideDown();
/* and add the active class*/
$(this).toggleClass('active');
}
});
});
function closeActiveTap(current){
$('.toggle-trigger').each(function(index,tap){
if(current!==tap && $(tap).hasClass('active')){
$(tap).removeClass('active');
$(tap).next('.toggle-content').slideUp();
}
});
}
function closeActiveTap takes an param current (current clicked tap) to make sure that on all other taps DOM-operations should be applied onto but not on the current tap because the current tap is handled anyway when reaching if-else codeblock.
Hope this helps
Related
i have a settings menu that shows up when the page loads, it has a button that hides it by adding the class "hidedown" and removing "showup" and vice verse when showing it.
i just want to minimize the menu after 2 mins in case someone does not click on the button.
my problem is, when i do this
if ($(".hidedown").length > 0 ) {
//hidedown class is present
} else {
//hidedown class is not present
}
i am always getting "hide class is not present" even when the class "hidedown" is there
/* so i have this function */
/* minimize the floating menu after 2mins */
window.setTimeout(function() {
if ($(".hidedown").length > 0) { /* i don knw why this is not working */
console.log("the menu should minimize");
$(".settings_link, .companies").animate({
left: "-=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("hidedowm").addClass("showup");
} else {
console.log("class 'hidedown' is not there!");
/* i get this even when the class is there */
}
}, 1000);
/* this will hide the settings/companies menu */
$(document).on("click", ".settings_link.showup", function() {
$(".settings_link, .companies").animate({
left: "+=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("showup").addClass("hidedowm");
});
/* this will show the settings/companies menu */
$(document).on("click", ".settings_link.hidedowm", function() {
$(".settings_link, .companies").animate({
left: "-=165"
}, 700, function() {});
$(this).html('<i class="fa fa-bars"></i>').removeClass("hidedowm").addClass("showup");
});
I have working code for slidedown menu content.
However I'm having some trouble with keeping the active which is the same as the hover state on when you click a button and taking it off when you click it to close it.
Here is my working example.
// IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
// ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
// OPEN THE SLIDE
$(this).next().slideDown('normal');
}
Here's my solution.
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
var self = this;
$(this).next().slideToggle('normal', function() {
$(self).toggleClass('on', $(this).is(':visible'));
});
});
Try the demo
Try
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').not(this).removeClass('on');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
Demo: Fiddle
I have this HTML structure:
<div id="side-menu">
<ul>
<li><img src="img/once_sonra.png"></img></li>
<li><img src="img/online_destek.png"></img></li>
<li><img src="img/sizi_arayalim.png"></img></li>
</ul>
</div>
CSS:
#side-menu {
display:block;
z-index:20;
position:fixed;
right:0;
top:76px;
}
I want, when click my page show this items and after hide with animate effect but i dont know how can i do? Thanks.
Something like this:
$(document).ready(function() {
// hide the menu initially
$("#side-menu").hide();
$(document).click(function() {
// on click show and then hide menu with animation
$("#side-menu").slideDown().delay(500).slideUp();
});
});
Demo: http://jsfiddle.net/dhVzq/
If you don't like the slide effect jQuery gives you several other options.
You'll need to bind to the click event of the page:
jQuery(function($) {
var $sideMenu = $('#side-menu'),
itemClicked = false; // Use to determine whether an item was clicked
$sideMenu.hide();
// Catch clicks on the document
$(document.body).click(function(e) {
// Check if the menu is visible
if (!$sideMenu.is(':visible')) {
$sideMenu
.stop(true) // Cancel any animation from a previous click
.show(); // Show the menu
// Set a timer to hide the menu after 5 seconds if nothing was clicked
setTimeout(function() {
if (!itemClicked) {
$sideMenu.slideUp(); // Hide the menu with the slideUp effect
}
itemClicked = false; // Reset the flag for next time round
}, 5000);
}
});
// Catch clicks on menu items
$sideMenu.click(function(e) {
itemClicked = true;
});
});
The problem:
In the example provided below, I have a sidenav with options, you click to reveal a toggled div. If you click the third item in the menu "Dolar", you will see you get a dropdown with three options appear below the link.
This is great, but I want the dropdown to close when I click on the other links. I'm not sure how to achieve this.
jsFiddle:
http://jsfiddle.net/visualdecree/4A23Z/39/
jQuery:
Note: I know it might be messy, I'm still learning this.
$('.sn a, .sn-alt a').on('click',function(){ // Sidenav panel script
var panID = $("#" + $(this).data('panel') );
$("div[id*='sn-pan-']")
.stop()
.hide({width:'toggle'},400);
$(panID)
.css({'left' : '139px','overflow':'visible'})
.stop()
.animate
({ width: "toggle", opacity: "toggle"
}, { duration: "slow" });
$(".control-view").hide(); // Fadein menu close button
$(".control-view").not(":visible").stop().delay(400).fadeTo("fast", 0.33);
});
$('.sn, .sn-drop').click(function(e) {
$('ul.sidenav li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$('.sn-alt').click(function(e) {
$('ul.additional li').not(this).removeClass('active'); // Active class removal / add
$(this).stop(true, true).toggleClass("active");
});
$(".control-view").hover( // Hover effect for menu close button
function () {
$(".control-view").stop().hide().fadeTo("fast", 1); // Hover in
},
function () {
$(".control-view").fadeTo("normal",0.33); // Fade back to previous set opacity
});
$('.control-view').click(function(e) {
$("div[id*='sn-pan-']")
.stop(true,true)
.hide({width:'toggle'}, 100);
$('ul.sidenav li').not(this).removeClass('active');
$(".control-view").stop().fadeOut("fast");
});
$(".additional").hide(); // Controls for the 'design' dropdown
$(".sn-drop").click(function(){
$(".additional").slideToggle(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});
Just add this JQuery, when you click on other link in your sidebar, it will close your .additional
$(".sn").click(function(){
$(".additional").slideUp(300);
var scrt_var = Math.random();
return false; //Prevent the browser jump to the link anchor
});
If it's just the links in the left that you want to be the trigger to close the dropdown then you can do it simply with this:
$('.sn').click(function(){
$('.additional').slideUp();
})
At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});
On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}