I've got to a point where my accordions open up at the same time - see http://www.bootply.com/Go4t29rYyF
When you click on "tab1" all the "tab1s" open, when you click on "tab2" all the "tab2s" open - great! But I cant open "tab1s & tab2s" at the same time, it only works when I close one of the tabs first before opening another. The issue is with my js but cant work it out.
$(function () {
var $active = true;
$('.panel-title > a').click(function (e) {
e.preventDefault();
});
$('.number1-collapse').on('click', function () {
if (!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.number1').collapse('hide');
} else {
$active = false;
$('.number1').collapse('show');
$('.panel-title > a').attr('data-toggle', '');
}
});
$('.number2-collapse').on('click', function () {
if (!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.number2').collapse('hide');
} else {
$active = false;
$('.number2').collapse('show');
$('.panel-title > a').attr('data-toggle', '');
}
});
});
I've tidied up your code and changed to using the toggle method instead of having various flags. The problem is that you are sharing the active flag between them. Here is the improved code and Bootply:
$(function () {
$('.panel-title > a').click(function (e) {
e.preventDefault();
});
$('.number1-collapse').on('click', function () {
$('.number1').collapse('toggle');
});
$('.number2-collapse').on('click', function () {
$('.number2').collapse('toggle');
});
});
You may want to specify which elements you are effecting in your function using the event parameter
Example:
$('.number2-collapse').on('click', function (event) {
var panelTitle = $(event.currentTarget).find('.panel-title > a');
var number = $(event.currentTarget).find('.number2');
if (!$active) {
$active = true;
$(panelTitle).attr('data-toggle', 'collapse');
$(number).collapse('hide');
} else {
$active = false;
$(number).collapse('show');
$(panelTitle).attr('data-toggle', '');
}
});
This is an example. You may need to alter this code for it to work in your situation
Related
I have a piece of javascript code which initiates mobile menu dropdown. But while I was working on this, I wasn't paying attention and stupidly copied a code from another source and now I can't click on parent items on mobile menu.
When I remove e.preventDefault();, I'm getting an error in console and menu is not working. Here is the full code. What can I do with my code to make the parent items clickable?
var $dropdownOpener = $('.mobile-header-navigation .menu-item-has-children > a');
if ($dropdownOpener.length) {
$dropdownOpener.each(function () {
var $thisItem = $(this);
$thisItem.on('tap click', function (e) {
e.preventDefault();
var $thisItemParent = $thisItem.parent(),
$thisItemParentSiblingsWithDrop = $thisItemParent.siblings('.menu-item-has-children');
if ($thisItemParent.hasClass('menu-item-has-children')) {
var $submenu = $thisItemParent.find('ul.sub-menu').first();
if ($submenu.is(':visible')) {
$submenu.slideUp(450);
$thisItemParent.removeClass('qodef--opened');
} else {
$thisItemParent.addClass('qodef--opened');
if ($thisItemParentSiblingsWithDrop.length === 0) {
$thisItemParent.find('.sub-menu').slideUp(400, function () {
$submenu.slideDown(400);
});
} else {
$thisItemParent.siblings().removeClass('qodef--opened').find('.sub-menu').slideUp(400, function () {
$submenu.slideDown(400);
});
}
}
}
});
});
}
}
Maybe try to call e.originalEvent.preventDefault() with null checks like :
e && e.originalEvent && e.originalEvent.preventDefault()
Hiding a div (for example #popover) on click is easy:
$(document).ready(function() {
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
});
});
But isn't this function fired every time the user uses a click? (Which does not make sense for me). Can I somehow limit this function to fire only if #popover is already visible?
In that case you can try using $(document).one(function(e) {...}); every time you show #example.
$(document).ready(function() {
var didBindToBody = false;
function closePopOverOnBodyClick() {
didBindToBody = true;
$(document).one('click', function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
else {
closePopOverOnBodyClick();
}
didBindToBody = false;
});
}
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
if (!didBindToBody && $("#popover").is(":visible")) {
closePopOverOnBodyClick();
}
});
closePopOverOnBodyClick();
});
DEMO
You could try something like
$(document).click(function(e) {
if (!$('#example').is(":visible")) {
return false;
} else if (!$(e.target).is('#popover, .login-panel *')) {
$("#popover").hide();
}
});
Or you could combine the two conditionals into one, just thought I'd keep it separate for readability and to make my suggestion easier to spot.
I have a navigation that on click shows the dropdown menu and on second click it goes to that url. I can't figure out how to cancel out the function when other link in the navigation is clicked on.
My problem is that when first link is clicked to show the dropdown and then second link will be clicked to show its dropdown, but since I have it set it up that on second it goes it the url. So, when clicked on the first link again it will go to that url instead of showing the dropdown menu. That is why I need to reset first link function when second link is clicked on and vise versa.
My fiddle example.
http://jsfiddle.net/3gpfc/37/
var visibleMenu1 = $('.menuHidden0 a');
var visibleMenu2 = $('.menuHidden1 a');
visibleMenu1.on('click', function () {
var clicks = $(this).data('clicks');
if (!clicks) {
$('.drop-nav0').addClass('menuVisible');
} else {
$('.drop-nav0').removeClass('menuVisible');
return true;
}
$(this).data("clicks", !clicks);
return false;
visibleMenu2.off('click');
});
visibleMenu2.on('click', function () {
var clicks = $(this).data('clicks');
if (!clicks) {
$('.drop-nav1').addClass('menuVisible');
} else {
$('.drop-nav1').removeClass('menuVisible');
return true;
}
$(this).data("clicks", !clicks);
return false;
visibleMenu1.off('click');
});
Any help will be appreciated.
Use preventDefault() instead of return false.
To reverse the opposite link you need to reset its clicks data too.
var visibleMenu1 = $('.menuHidden0 a');
var visibleMenu2 = $('.menuHidden1 a');
visibleMenu1.on('click', function (e) {
var clicks = $(this).data('clicks');
if (!clicks) {
e.preventDefault();
$('.drop-nav0').addClass('menuVisible');
} else {
$('.drop-nav0').removeClass('menuVisible');
}
$(this).data("clicks", !clicks);
visibleMenu2.data("clicks", !visibleMenu2.data("clicks"));
});
visibleMenu2.on('click', function (e) {
var clicks = $(this).data('clicks');
if (!clicks) {
e.preventDefault();
$('.drop-nav1').addClass('menuVisible');
} else {
$('.drop-nav1').removeClass('menuVisible');
}
$(this).data("clicks", !clicks);
visibleMenu1.data("clicks", !visibleMenu1.data("clicks"));
});
try with this code
var visibleMenu1 = $('.menuHidden0 a');
var visibleMenu2 = $('.menuHidden1 a');
visibleMenu1.on('click', function (e) {
if(!visibleMenu2.data("clicks")){
var clicks = $(this).data("clicks")
if(!clicks){
e.preventDefault();
$(".drop-nav0").addClass("menuVisible");
$(this).data("clicks", !clicks);
}else{
$(".drop-nav0").removeClass("menuVisible");
$(this).data("clicks", !clicks);
}
}else{
e.preventDefault();
$(".drop-nav1").removeClass("menuVisible");
visibleMenu2.data("clicks", false);
}
});
visibleMenu2.on('click', function (e) {
if(!visibleMenu1.data("clicks")){
var clicks = $(this).data("clicks")
if(!clicks){
e.preventDefault();
$(".drop-nav1").addClass("menuVisible");
$(this).data("clicks", !clicks);
}else{
$(".drop-nav1").removeClass("menuVisible");
$(this).data("clicks", !clicks);
}
}else{
e.preventDefault();
$(".drop-nav0").removeClass("menuVisible");
visibleMenu1.data("clicks", false);
}
});
I'm trying to show this CSS on the first click and remove it on the next but toggleClass doesnt seem to work and neither does my code below. All I can get is the CSS to show and it never gets removed. This is for use on Safari on iOS. Thanks for the help!
var menu_enabled = false;
$('#nav a').click(function () {
if (menu_enabled == true) {
$(this).removeClass('sf-js-enabled');
var menu_enabled = false;
}
else {
var menu_enabled = true;
$(this).addClass('sf-js-enabled');
}
});
You should checkout .toggleClass(), looks like it's exactly what you're wanting.
$('#nav a').click(function () {
$(this).toggleClass('sf-js-enabled');
});
Perhaps using the .className attribute?
var menu_enabled = false;
$('#nav a').click(function () {
if (menu_enabled == true) {
$(this).className = "";
menu_enabled = false;
}else
{
menu_enabled = true;
$(this).className = 'sf-js-enabled';
}
});
I'm not exactly sure what you're trying to accomplish overall, but addClass and removeClass should work just fine. I would add an ID or class to the element that you want to have the click attached to but that's just a personal preference.
$(document).ready(function(){
$('#element').click(function(){
if($('#element').hasClass('sf-js-enabled')){
$('#element').removeClass();
}
else{
$('#element').addClass('sf-is-enabled');
}
});
});
I've created your typical jQuery slider (code from here). Everything works just fine as is, except I don't want the fadeIn() to run when the page loads (it just looks weird since the user hasn't clicked anything yet). Any ideas how to fix this? Basically I want to leave it as is, except no fade on page load. Thanks!
// Tab slides
$(function () {
var tabContainers = $('div.slider > div');
$('div.slider ul.slider-nav a').click(function () {
tabContainers.hide().filter(this.hash).fadeIn();
$('div.slider ul.slider-nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
// Tab slides
$(function () {
var tabContainers = $('div.slider > div'),
loaded = false;
$('div.slider ul.slider-nav a').click(function () {
var tab = tabContainers.hide().filter(this.hash);
if (loaded){
tab.fadeIn();
}else{
tab.show();
}
loaded = true;
$('div.slider ul.slider-nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Explanation: The script is loading a click handler, then (once loaded) calling the click handler it just created. Because of this, it will fade (as the handler is instructing it to do). This can be avoided by added a check (in this cases the loaded variable) that basically lets the first click flow through without any intervention, but makes any future calls apply the fade.
You could set a flag after the first run, which is then checked on successive runs.
// Tab slides
$(function () {
var tabContainers = $('div.slider > div');
var firstRun = true;
$('div.slider ul.slider-nav a').click(function () {
tabContainers.hide().filter(this.hash);
if(!firstRun) { tabContainers.fadeIn(); firstRun = false; }
$('div.slider ul.slider-nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Well can't you just remove
tabContainers.hide().filter(this.hash).fadeIn();
?