I do have 2 elements in my page which i want to show them when user clicks on 2 different buttons.
Here is my code
$('.social-toggle').on('click', function() {
$(this).next().toggleClass('open-menu');
});
$('.social-toggle1').on('click', function() {
$(this).next().toggleClass('open-menu');
});
When user clicks on the first button, the first element will be show up, but i want either user clicks on the second button or one of the links in the opened-menu the first opened menu be closed.
JSFIDDLE
You do not need to write two different event here. Use comma seprated multiple selector for targetting both button:
$('.social-toggle,.social-toggle1').on('click', function() {
$('.social-networks').not($(this).next()).removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
Working Demo
Here is the code what you want. You didnt removed the class which was applied previously.
$('.social-toggle').on('click', function() {
$('.social-toggle1').next().removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
$('.social-toggle1').on('click', function() {
$('.social-toggle').next().removeClass('open-menu');
$(this).next().toggleClass('open-menu');
});
Related
I have a page with several popovers that are acting as additional information for products.
When functioning as intended a user should be able to click on a popover, and when they click on another popover the previous popover closes. This functionality already exists in my current code, however, when a user does this the previous popover's button does not have its toggle state reset. This means when the user clicks on the second popover and tries clicking on the original one they have to click twice (once to set the toggle back to original state, and once to reopen it).
I would like to know how to reset the toggle state of all other popovers when a new popover is opened.
You can see my current working code here:
http://codepen.io/kcarskadon/pen/BLJdkJ?editors=1010
Here is the current jquery I am using:
$(function () {
$('[data-toggle="popover"]').popover({
html: 'true'
})
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
$(document).on('show.bs.popover', function(){
$('.popover').not(this).hide()
});
$(document).on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
Thanks for the help!
You're hiding the item, not using the popover hide function, try it like this:
$(function () {
$('[data-toggle="popover"]').popover({
html: 'true'
})
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
$(document).on('show.bs.popover', function(){
$('.popover').not(this).popover('hide');
});
$(document).on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
I have a button which creates a pulldown in which you can select several categories.
Now i want this to close automatically when i click outside the pulldown.
Something like a lightbox or modal popup which closes if you click anywhere else on the page.
Now i have to click the button again to close it. If i dont and go elsewhere on the page, the dropdown stays visible (until i click it)
This is the code of the button:
$(function(){
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Is this possible?
thanks
Using jquery this is the code I used for a similar case scenario sometime ago:
$(document).click(function(event) {
if(!$(event.target).closest('.pulldown').length) {
if($('.pulldown').is(":visible")) {
$('.pulldown').slideUp()
}
}
})
You can read more about this in the original post How to detect a click outside an element? submitted by Art.
I'm not exactly sure of the elements you want to hide as you don't have a demo, so I cannot provide a fully working code, however you should do something like this:
$("body").click(function(event) {
if (event.target.id != "browse-btn") {
// Do something when there's a click outside of #browse-btn
// and the element you want to hide is currently visible
}
});
You can attach a click event to all chidren of the body tag that removes that active class, but you would want to make sure to unbind that event so it doesn't run every time a click takes place that doesn't have some sort of prevent default on it. Something like this:
$(function(){
var hidePulldown = function(){
$('#browse-btn').removeClass('active');
$('body *').unbind("click", hidePulldown);
}
$('#browse-btn').click(function(){
$('#browse-content').toggle('1000');
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else {
$(this).find('span').html('▼');
$(document).on('click', 'body *', hidePulldown);
}
});
$(".scroll-top").scrollToTop();
$("#category_id").selectbox();
});
Also, the
$(document).on('click', element, function(){function body})
is the preferred way to attach click events i believe: $(document).on('click', '#id', function() {}) vs $('#id').on('click', function(){})
This is what worked flawlessly for me after reading some of the answers here:
$(document).click(function(event) {
if(!$(event.target).closest('#menucontainer').length &&
!$(event.target).is('#menucontainer')) {
if($('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
}
})
Thanks for pointing me in the right way!
I have a calendar in my page which have a more info button.
That button opens when clicked upon but do not close.
How can i close it?
Button:
$('a.cmoreinf').live('click', function() {
$('.ccontent').each(function() {
$(this).css('display','none');
});
$(this).closest('.calsingleentry').find('.ccontent').css('display','block');
return false;
});
Calendar Page
I don't have all the information needed to really answer this question but I believe you're wanting to have a modal appear on the first click, disappear on the second, appear on the third etc... basically toggling the display property. If so...
$('a.cmoreinf').on('click', function(e){
e.stopPropagation();
$('.ccontent').hide();
$(this).closest('.calsingleentry').find('.ccontent').toggle();
});
jQuery toggle()
The class ccontent is inside the div calsingleentry.
Use this:
$('a.cmoreinf').live('click', function() {
$('calsingleentry').find('.ccontent').each(function() {
$(this).css('display','none');
});
$(this).closest('.calsingleentry').find('.ccontent').css('display','block');
return false;
});
I have code that lets me to show an element on click of one element and hide it on click of another. Code looks like:
$('.downloads').hide()
$('.downloads').css({visibility:'visible'})
var Dshow=false;
$('.allLink').click(function() {
if(!Dshow){
Dshow=true;
$(".downloads").fadeIn("fast");
$('#footer2').html($('#footer1').html());
$('#footer1').html('');}
});
$('.hideAllLink').click(function() {
if(!!Dshow){
Dshow=false;
$(".downloads").fadeOut("fast");
$('#footer1').html($('#footer2').html());
$('#footer2').html('');}
});
I want $('.allLink').click(function() to have 2 states - on first click it shall show ".downloads" and on second click hide.
How to do such thing with jQuery?
You can use .toogle(). This method will hide element if it's visible, or make it visible if it's hidden.
$('.allLink').click(function()) {
$('.downloads').toggle();
}
I think what you are looking for is a toggler: Use of jQuery toggle function
Use
$( "#idofthebutton" ).toggle(
function() {
/// hide the link
$(".downloads").fadeOut("fast");
}, function() {
///show the link
$(".downloads").fadeIn("fast");
}
);
This will work automatically to hide and show the links....
Note: In this case keep the links visible at first place. If you don't want that then change the order of the functions inside the .toggle
I have a definition list with a lot of text inside of it. When a user comes to the page, I want the jQuery to hide two thirds of that content, add a next and previous button where appropriate, and fade the content in and out. The first third of the content is .issue-group-1, the second third is .issue-group-2, the third, .issue-group-3.
I am trying to set it so that when the user hits the next button, the next button changes classes, and thus acts differently the next time the user clicks it (that is, it takes them to the third page instead of the second.
Right now, the next/previous buttons are working on the first and second "pages" but the next button to the third page won't work.
My code is probably too long and this is maybe not the best way to do it--I'm new to jquery. Any suggestions would be helpful.
$(document).ready(function(){
$('.issue-group-2, .issue-group-3').hide();
$('a#next-button.page1').fadeIn(500);
$('a#next-button.page1').click(function() {
$(this).removeClass('page1').addClass('page2');
$('.issue-group-1').fadeOut(500, function() {
$('.issue-group-2').fadeIn(500);
});
$('a#previous-button').fadeIn(500);
});
$('a#previous-button.page2').click(function() {
$('#next-button.page2').removeClass('page2').addClass('page1');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-1').fadeIn(500);
});
$('a#previous-button').fadeOut(500);
});
$('a#next-button.page2').click(function() {
$('a#previous-button').removeClass('page2').addClass('page3');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-3').fadeIn(500);
});
$('a#next-button').fadeOut(500);
});
$('a#previous-button.page3').click(function() {
$(this).removeClass('page3').addClass('page2');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-2').fadeIn(500);
});
$('a#next-button').fadeIn(500);
});
});
You need to use live instead of click. Check out the documentation.
$('a#next-button.page1').live("click", function() {...});
$('a#previous-button.page2').live("click", function() {...});
$('a#next-button.page2').live("click", function() {...});
$('a#previous-button.page3').live("click", function() {...});