jQuery is still a learning process for me, but I have an accordion script here and I am looking to add a close icon to each toggle menu that will close the toggle once it has been opened, however I can't seem to get it to work. Thoughts?
FIDDLE
$('#main').each(function () {
var $accordian = $(this);
$accordian.find('.view-m').on('click', function () {
$accordian.find('.mobile-content-body').slideUp();
$accordian.find('span').css('transform', 'rotate(0deg)');
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(90deg)');
$(this).next().slideDown();
$accordian.find('.close').slideToggle(500);
}
});
});
You need to replace:
$accordian.find('.close').slideToggle(500);
->
$accordian.find('.close').click(function() {
$(this).parent().slideUp(500);
});
Or
$accordian.find('.close').on('click',function() {
$(this).parent().slideUp(500);
});
JSFiddle
Related
I am using bootstrap mega menu. On hover it opens sub menu but sometime it takes click event also and sub menu got stuck.
In my javascript there is not mention any click event just have hover code.
$(document).ready(function() {
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("100");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("100");
$(this).toggleClass('open');
}
);
});
reference:
https://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel
You need to change the Hover event to Click event and make it "toggleable".
Theres an example for that:
$(document).ready(function(){
var dropdownOpen = null; // Toggle status
$(".dropdown").click(function() {
if(dropdownOpen === this){
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close clicked
dropdownOpen = null; // Reset
}
else{
$('.dropdown-menu').not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close all
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); // Open clicked
dropdownOpen = this; // Set
}
$(this).toggleClass('open');
});
// Hide when click outside the element
$(window).click(function() {
$('.dropdown-menu').not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close all
});
});
You can try this code in the same reference example you posted above.
Edit: I added the dropdown hidden when click outside the element
I have been working on navigation bar and the strangest issue is occurring.
Please use the JSFiddle link to see what I mean.
To duplicate the error:
Run the code when the desktop view is active i.e. when the navigation links are in a line.
Then resize the screen till the "click me" is displayed.
Then press it.
Now run the code while you see the "click me" and press it again.
JS information
jQuery(document).ready(function($) {
// UserCP
$('.rotate').on('click', function() {
$(this).toggleClass("down");
});
$('.nav-start').on('click', function() {
$("#nav2").removeClass("hidden");
$('#nav2 li a').stop().slideToggle('100');
return false;
});
$(document).ready(function() {
$('#nav2 li a').stop().slideToggle('100');
});
$('body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length) {
if ($('#nav2 li a').is(":visible")) {
$('html, body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
};
};
});
});
FIXED - UPDATED JSFiddle! Thanks #Louys Patrice Bessette #Titus #Rick
You are using two click events on this "Click me" li...
(One on .navstart and one on .rotate)
It may not be an issue, but this make the code harder to read.
Then, when you slideToggle(), if you want the submenu to slide down, it has to be hidden.
Because, since you remove the hidden class (probably usefull on load), the submenu is visible.
A Toggle hides it.
I simplified your script to this.
Have a look at this updated Fiddle.
$(document).ready(function() {
// Show submenu on "Click me"
$('.nav-start').on('click', function() {
$('.rotate').toggleClass("down");
$("#nav2").removeClass("hidden");
var subNav = $('#nav2 li a');
if(subNav.css("display")=="block"){
subNav.stop().slideUp('100');
}else{
subNav.stop().slideDown('100');
}
return false;
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
// Hide submenu on document click
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
$('#nav2 li a').stop().slideUp('100');
};
});
});
I am trying to get the Bootstrap3 nav dropdown to trigger a collapsible div at the same time it displays the dropdown - basically to 'simulate' a fullwidth subnav bar:
$('.dropdown').on('show.bs.dropdown', function () {
$('#collapseExample').slideDown('normal');
});
$('.dropdown').on('hidden.bs.dropdown', function () {
if (!$('div.dropdown').hasClass('open')) {
$('#collapseExample').slideUp('normal');
}
});
http://codepen.io/anon/pen/myRgbQ
I have 'almost got it working but it behaves strangely when there is already one subnav open...
I'm sure it would be a quick fix, but I'm stumped! Any help would be greatly appreciated!
Try this code:
$('#collapseExample').collapse(true);
$('.dropdown').on('show.bs.dropdown', function () {
$('#collapseExample').slideDown('normal');
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hidden.bs.dropdown', function () {
if (!$('div.dropdown').hasClass('open')) {
$('#collapseExample').slideUp('normal');
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
}
});
Hi this is a two in one question. I have the following fiddle:
Fiddle
I am trying to make it so the arrow goes to a downward position when the menu is toggled open and then have the arrow return to an upward position when the menu is closed. I would like it also so that when another "Click Me" is clicked if another is open it closes the previous. It was easier for an accordion style menu, but this has multiple open and closed divs. Thoughts?
$(document).ready(function () {
// Toggles 1st Hidden Desktop Div
$(".dtc-s").click(function () {
$(".dtc-h").slideToggle(500);
$(".dtc-h").find('span').css('transform', 'rotate(90deg)');
});
// Toggles 2nd Hidden Desktop Div
$(".dtc-two-s").click(function () {
$(".dtc-two-h").slideToggle(500);
$(".dtc-two-h").find('span').css('transform', 'rotate(90deg)');
});
// Toggles 3rd Hidden Desktop Div
$(".dtc-three-s").click(function () {
$(".dtc-three-h").slideToggle(500);
$(".dtc-three-h").find('span').css('transform', 'rotate(90deg)');
});
// #1
if ($('.dtc-one').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
// #2
if ($('.dtc-two').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)');
// #3
if ($('.dtc-three').is(':visible')) $(this).next().slideDown();
$(this).find('span').css('transform', 'rotate(0deg)'); {}
});
"I would like it also so that when another "Click Me" is clicked if another is open it closes the previous"
For this part you can hide the 2 other divs on click like this
$(".dtc-s").click(function () {
$(".dtc-h").slideToggle(500);
$(".dtc-two-h").hide(500);
$(".dtc-three-h").hide(500);
});
fiddle here
Still looking for your first question
Edit:
for your first question change this line
$(".dtc-h").find('span').css('transform', 'rotate(90deg)');
to this
$(this).find('span').css('transform', 'rotate(90deg)');
if you want to return the arrow to its right position you might need to include a flag or add/remove a .rotation class to the element
Edit2: "if there is a way once a new "Click Me" is toggled can the arrow of that previous opened toggle return to its rightward position?" fiddle here
the idea:
$(".dtc-two-s").find('span').removeClass('transform'); //not clicked => remove rotation
$(".dtc-three-s").find('span').removeClass('transform'); //not clicked => remove rotation
$(this).find('span').toggleClass('transform'); //clicked => add rotation
i think you want something like this
Js Fiddle
$(this).find('span').toggleClass('transform');
$(document).ready(function () {
// Toggles 1st Hidden Desktop Div
$(".dtc-s").click(function () {
$(".dtc-h").slideToggle(500,function(){checkAll();});
$(".dtc-two-h").hide(500,function(){checkAll();});
$(".dtc-three-h").hide(500,function(){checkAll();});
$(".dtc-s").find('span').css('transform', 'rotate(90deg)');
});
// Toggles 2nd Hidden Desktop Div
$(".dtc-two-s").click(function () {
$(".dtc-two-h").slideToggle(500,function(){checkAll();});
$(".dtc-h").hide(500,function(){checkAll();});
$(".dtc-three-h").hide(500,function(){checkAll();});
$(".dtc-two-s").find('span').css('transform', 'rotate(90deg)');
});
// Toggles 3rd Hidden Desktop Div
$(".dtc-three-s").click(function () {
$(".dtc-three-h").slideToggle(500,function(){checkAll();});
$(".dtc-two-h").hide(500,function(){checkAll();});
$(".dtc-h").hide(500,function(){checkAll();});
$(".dtc-three-s").find('span').css('transform', 'rotate(90deg)');
});
});
function checkAll(){
if ($('.dtc-one').css('display') == 'none')
$('.dtc-s').find('span').css('transform', '');
if ($('.dtc-two').css('display') == 'none')
$('.dtc-two-s').find('span').css('transform', '');
if ($('.dtc-three').css('display') == 'none')
$('.dtc-three-s').find('span').css('transform', '');
}
I am using Foundation Accordion and I added a script to have smooth opening and closing. It works but the problem is if you have only one panel you can open it but not close it.
Here is the code used:
$(".accordion").on("click", "dd:not(.active)", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("slow");
$(this).addClass('active').find(".content").slideToggle("slow");
});
I tried this code but it didn't work:
$("dd.active").on("click", function (event) {
$("dd.active").removeClass('active').find(".content").slideUp("slow");
});
How do I get this to close smoothly?
Here is a jsFiddle
Note: Open the Panel then Try to Close It.
Remove href from <dd><a>.
JS:
$(function () {
$(".accordion").on("click", "dd", function (event) {
if (!($(this).hasClass("active"))) {
$("dd.active").removeClass('active').find(".content").slideUp("fast");
}
$(this).toggleClass('active').find(".content").slideToggle("fast");
})
});
Updated fiddle here.