I have two functions for select drop down menus, and a function for a accordion to animate when I click a title. I also want the accordion to animate when one of the options have been selected from the drop down menu.
$(document).ready(function() {
$('#accordion').find('.accordion-toggle').click(function(){
// expand or collapse this panel
$(this).next().slideToggle('slow');
// hide the other panels
$('.accordion-content').not($(this).next()).slideUp('slow');
});
$('#size').change(function(){
if ($(this).val() > 0 ) {
$('#pizza').addClass('pizzaImage');
}
});
$('#crust').change(function(){
if ($(this).val() > 0 ) {
$('#pizza').addClass('pizzaImage');
}
});
});
what do I have to do to open the accordion not with a click but when a option is selected from the drop down menu?
Related
The issue I'm having is, creating a submenu inside another menu.
Demo: LIVE DEMO (Important, cause CSS is needed as well
$(function () {
// Desktop Menu
var categoriesMenu = $(".list-ausbildung-categories li");
var triggerMenu = $(".dropdown-submenuSide");
var highlightsList = $(".list-ausbildung-highlights");
var submenuList = $(".list-ausbildung-submenu");
$('.list-ausbildung-categories').on('click', 'li', function () {
if( $(this).hasClass('active') ){
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
} else {
highlightsList.hide();
submenuList.show();
triggerMenu.addClass('asg-gray-bg-200');
$('li.active').removeClass('active');
$(this).addClass('active');
var subMenu = $(this).find(".dropdown-submenu").html();
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html(subMenu);
}
});
$('.asg-megamenu div[class^="col"]:first-child').on('click', function () {
categoriesMenu.removeClass('active');
triggerMenu.removeClass('asg-gray-bg-200');
submenuList.hide();
highlightsList.show();
});
});
I'm having this Bootstrap Mega Menu, which also contains a submenu (Column 2). On click, it should hide Column 3, and show the submenu items. (it does its job)
Currently, I'm grabbing the submenu content with jquery html() and then placing it on the third column (probably not the cleanest method).
The problem: whenever I close a submenu and click again, it won't open back.
It looks like currently, the active class isn't removed on the second click. Instead, it just clears out the HTML of column three. We could fix that by adding a line to remove the active class when we hide the submenu.
if( $(this).hasClass('active') ){
$(this).removeClass('active'); // add in this line here so it will trigger properly on the next click
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
}
How to bind(enable click event) and unbind(stop click event) jquery accordian depends on condition.If i selected value 1 from dropdown box i want to enable third link accordian if i select value 2 i want to unbind third accordian.How do it?
http://jsfiddle.net/nh0kcuop/1/
Script:
//On click any <h3> within the container
$('#container h3').click(function(e) {
//Close all <div> but the <div> right after the clicked <a>
$(e.target).next('div').siblings('div').slideUp('fast');
//Toggle open/close on the <div> after the <h3>, opening it if not open.
$(e.target).next('div').slideToggle('fast');
});
$('#status').on('change',function(){
if( $(this).val() == 1 ){
$('.text').bind('click');
}
if( $(this).val() == 2 ){
$('.text').unbind('click');
}
});
Hi updated your fiddle you can use "on" ond off to enabled the click function
//On click any <h3> within the container
$('#container h3').click(function(e) {
//Close all <div> but the <div> right after the clicked <a>
$(e.target).next('div').siblings('div').slideUp('fast');
//Toggle open/close on the <div> after the <h3>, opening it if not open.
$(e.target).next('div').slideToggle('fast');
});
$('#status').on('change',function(){
console.log("status changed :" + $(this).val());
if($(this).val() == 1 ){
$('#container h3').on('click',function(e) {
//Close all <div> but the <div> right after the clicked <a>
$(e.target).next('div').siblings('div').slideUp('fast');
//Toggle open/close on the <div> after the <h3>, opening it if not open.
$(e.target).next('div').slideToggle('fast');
});
}
if($(this).val() == 2 ){
$('#container h3').off('click');
}
});
please visit here
I am using the foundation off-canvas menu with dropdown. Some of the items menus are not clickable but showing their submenus using this function:
$('.page-item-1765 > a, .page-item-1761 > a').click(function(e){
$(this).parent().children('ul.children').slideToggle();
e.preventDefault();
});
This works perfectly. But what I need is to have other items menu clickable, showing their submenus stayed on the dropdown opened and be able to close the dropdown afterwards by clicking a second time on the items menus.
I tried this but it doesn't work:
$('.page-item-12 > a').on('open').click(function(){
$(this).parent().children('ul.children').slideToggle();
});
I also tried:
$('.page-item-12 > a').on('close').click(function(){
$(this).parent().children('ul.children').slideDown();
});
$('.page-item-12 > a').on('open').click(function(){
$(this).parent().children('ul.children').slideUp();
});
But still doesn't work. Someone can help me on this?
try
$('.page-item-12 > a').on('click', function () {
if ($(this).css('display') == 'none') {
// your menu is closed
} else {
// your menu is opened
}
});
I'm doing something slightly different to what i've seen work, many people have done it so there dropdown is part of a child list. However i'm trying to work with a sibling dropdown menu.
Here is my fiddle: http://jsfiddle.net/58m99wf8/
What you'll notice is that if you hover on the button, the dropdown menu appears. If you leave the button it disappears which is perfect. However if you hover on the dropdown menu it still disappears and this isn't what I want it to do.
How can i prevent this?
I've seen it work like this:
if($('#menuONE').has(e.target).length === 0) {
// toggle menu to close
}
However i don't see how i can attach this to the submenu as well as the button.
What you can do is add the menu to the selector.
I also defined menu because this can refer to the button or the menu now, so traversing from there could be problematic.
var menu = $('.dropdown-menu');
$('.dropdown-hover-toggle, .dropdown-menu').hover(
function () {
//show its sibling menu
menu.stop().slideDown();
},
function () {
//hide its sibling menu
menu.stop().slideUp();
});
http://jsfiddle.net/58m99wf8/1/
Try this
var isSiblingHovered = false;
$('.dropdown-hover-toggle').hover(function () {
$(this).siblings('.dropdown-menu').slideDown();
},
function () {
var current = $(this);
setTimeout(function(){
if(!isSiblingHovered){
current.siblings('.dropdown-menu').stop().slideUp();
}
}, 50);
});
$('body').on("mouseleave", ".dropdown-menu", function() {
isSiblingHovered = false;
$('.dropdown-menu').stop().slideUp();
});
$('body').on("mouseenter", ".dropdown-menu", function() {
isSiblingHovered = true;
});
EXAMPLE
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();
})