We Keep Coding

jQuery remove class of parent of parent

I'm working on a little vertical accordion and I ran into a snag.
Upon clicking a div, that div opens up to fill the screen... I'm trying to reverse this upon clicking the "close button" div, but it's not working for me.
Here is my code... https://codepen.io/Finches/pen/mpyKrL
$(document).ready(function() {
$('.shutter').click(function() {
if (!$(this).hasClass('shutterExpanded')) {
$(this).addClass('shutterExpanded');
$('.wrapper').addClass('shutterOpen');
$(this).children(".shutterContent").fadeIn(400).addClass("show-content");
$(this).children(".shutterBG").addClass("bg-opacity");
}
});
$('.close-btn').click(function() {
$(this).parent().parent().removeClass("shutterExpanded");
$('.wrapper').removeClass('shutterOpen');
$(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
$(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
});
});
Any help here?

Try following code. Actually it is happening for you clicking each time on ".shutter". Because when you clicking on close button it is also inside of ".shutter" div that why it is collapsing then again opening.
$(document).ready(function() {
$('.shutter').click(function() {
if (!$(this).hasClass('shutterExpanded')) {
$(this).addClass('shutterExpanded');
$('.wrapper').addClass('shutterOpen');
$(this).children(".shutterContent").fadeIn(400).addClass("show-content");
$(this).children(".shutterBG").addClass("bg-opacity");
}
});
$('.close-btn').click(function(e) {
e.stopPropagation(); // Key line to work perfectly
if ($(this).parent().parent().hasClass("shutterExpanded")) {
$(this).parent().parent().removeClass("shutterExpanded");
};
$('.wrapper').removeClass('shutterOpen');
$(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
$(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
});
});

Click outside menu to close it

Here's my function,
$(document).ready(function () {
$('.a').click(function () {
var here = $(this).next('.b');
if (here.is(":visible")) {
here.hide();
} else {
here.show();
}
return false;
});
});
So, whenever I click the button it opens a small tab on same webpage & whenever I click it again it closes it. But once I open the tab I can't close it by just clicking somewhere on webpage apart from tab. I have to click the button again to close it.
How can I close tab just by clicking somewhere on webpage also by on the button?

I end up searching for this on almost every project, so I made this plugin:
jQuery.fn.clickOutside = function(callback){
var $me = this;
$(document).mouseup(function(e) {
if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
callback.apply($me);
}
});
};
It takes a callback function and passes your original selector, so you can do this:
$('[selector]').clickOutside(function(){
$(this).removeClass('active'); // or `$(this).hide()`, if you must
});
Nice, chainable, elegant code.

On document click, the closest helps to check whether the tab has been clicked or not:
$(document).click(function (e) {
if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
$('.b').hide();
}
});

You want to check for a click on the body :
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
menu would be the id of the menu.
If the body is clicked and the id of the div clicked doesn't equal that of the menu, then it closes.

Check this implementation
jQuery(document).ready(function() {
$(document).on('click','body, #btn',function(ev){
ev.stopPropagation()
if(ev.target.id== "btn"){
if($('#modal').is(':visible')) {
$('#modal').fadeOut();
} else{
$('#modal').fadeIn();
}
} else {
$('#modal').fadeOut();
}
});
});
html, body {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
Click Me!
</button>
<div id="modal" style="background-color:red;display:none;">
BLA BLA BLA
</div>

To check if the clicked element is outside of a given container, i.e. a menu, we can simply check if the event target is a child of the container. Using JQuery -
$('body').click(function(e) {
if ( 0 === $(e.target).parents('#container-id').length ) {
/// clicked outside -> do action
}
})

you have to add a click listener to the parent element, like here:
$('.parent-div').click(function() {
//Hide the menus if visible
});
Also because click events bubbled up from child to the parent,
you can exclude the click on the child element to get bubbled up and count as the parent click too. you can achieve this like below:
//disable click event on child element
$('.child-div').click(function(event){
event.stopPropagation();
});

How to close a dropdown with JS with a second click handler

I've got the functionality that allows you to open and close the hidden dropdown that you can see in the link but I want to also be able to close the already open dropdown if you click the same image again.
At the moment I can only close the ones on the outside of the clicked element.
Main fragment of code (wired up on ready), complete working sample - JsFiddle:
function close() {
$('.slide').removeClass("active");
$('.slide').css("padding-bottom", 0 + "px");
}
function open() {
$(this).addClass("active");
$(this).css("padding-bottom", height);
}
$('.slide').on('touchstart click', function() {
close();
if ( $(this).hasClass("active") ) {
close();
}
if ( !$(this).hasClass("active") ) {
$(this).addClass("active");
$(this).css("padding-bottom", height);
}
});
HTML:
<div class="slide"> title
<div class="js-slide">content of slide hidden via CSS when
"active" class is not present</div>
</div>

This change to your code seems to achieve the desired effect:
$('.slide').on('touchstart click', function() {
if ( $(this).hasClass("active") ) {
close();
} else {
close();
$(this).addClass("active");
$(this).css("padding-bottom", height);
}
});
Because your close() function removes the active class from the element, you need to have it in a place where it won't mess with the conditions your checking around the active class. Moving it inside the if blocks is an easy and quick change to fix the issue. Some people might be bothered by the way close() is repeated in both blocks. If you're one of those people, refactor appropriately. Just don't do the obvious-seeming move close() outside the if/then because that will cause this issue to re-appear.
Fiddle: https://jsfiddle.net/960cm7ux/1/

Hide div when user clicks outside unless closing lightbox

I'm currently using the following code to allow a user to show/hide a div on click.
When clicking anywhere outside of the div, it closes the div.
However, there is a link within the div which can open a lightbox. When a user goes to close that lightbox, it also closes the div that the link was contained. Is there anything I can add into the script to stop that from happening?
$(document).ready(function(){
$("a.dropdown-link").click(function(evt) {
evt.preventDefault();
var $div = $(this).next('.info-container');
$(".info-container").not($div).slideUp();
if ($div.is(":visible")) {
$div.slideUp()
} else {
$div.slideDown();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".info-container").slideUp();
}
});
$('.movie-link').magnificPopup({type:'iframe'});
});
<a class="dropdown-link" href="#"><div class="dropdown dropdown-processed">More info</div></a>
<div class="info-container" style="display: none;">Video preview: <a class="movie-link" href="videourl"></a></div>
I'm using Magnific Popup for the lightbox: http://dimsemenov.com/plugins/magnific-popup/
My JavaScript knowledge is pretty basic so any help is appreciated.

In the "click to close div function, you can check if the lightbox is on or not. A simple if ($("#lightbox").css("display") == "none") should be able to do the trick
EDIT: put this line after the $(document).ready line
var state = 0; // default state
$('.movie-link').click(function() { state = 1; }); // state = 1, lightbox on
in the source code, on line 384, insert this code
state = 2; //state = 2, lightbox close button clicked
the idea is not firing the "close div" function when the state is 1 (lightbox is on and clicking random stuffs inside, or outside the lightbox) or 2 (lightbox's close button got clicked), and return state to 0 when it was 2
so instead of the if I provided in the comment use this
if (state == 2) {
state = 0;
} else if (state == 0) {
//rest of the code
}
this is just something I put together and haven't tested yet, so I don't actually know if it works or not so just back up your js files just in case.
EDIT 2:
remove all the changes in edit 1 and use this on instead of the if (state == 2) {
if (e.target != $('.mfp-bg')[0] and e.target != $('.mfp-wrap')[0]) {
EDIT 3
var e_class = $(e.target).attr('class');
if (e_class != 'mfp-close' && e_class != 'mfp-container') {
working example: http://imgcrash.comeze.com/test.html

I'm not 100% without actually testing this out but you may be running into issues with $(document).click(...); since clicking anywhere on the document would trigger this event.
When you close the popup you're probably triggering this event and sliding up the info-container div.
It seems that you're looking for clicks on the divs with the class .dropdown. Why not use something like:
$('.dropdown').click(function(e) { ... });

Try this:
$("a.dropdown-link").click(function(evt) {
evt.preventDefault();
evt.stopPropagation(); //We stop the propagation of the event
//Changed it to slideToggle and added stop to prevent weird animation
//on multiple clicks
$(this).next('.info-container').stop().slideToggle()
});
$(document).click(function(e){
//Check if it has the class info-container
if (!$(e.target).hasClass("info-container")) {
$(".info-container").slideUp();
}
});
$('.movie-link').magnificPopup({type:'iframe'});
Fiddle

jQuery Toggle - should close only on clicking the header

The Fiddle: http://jsfiddle.net/bscn3/
Scenario:
I want to use nested toggles inside tabbed containers, as in the fiddle.
My Issue:
When I click on Main Toggle ("Toggle 1") or ("Toggle 2"), the inner contents display.
But it closes if I click on anything inside. For Eg. If I click on Toggle 2, and if I click on Tab 1 -> Nested Toggle 1, Toggle 2 itself closes.
I want it to remain open.
My Guess:
The JQuery working closes the toggle if anything related to the Toggle (Even text content) is clicked.
My Need:
I want the Toggle to close only if those rectangular headers are clicked.
Also, if you can help clean up the code in such a way, that I don't need to write separate JS to make inner nested Toggles work independently of its parent or children toggles, it would great.
Currently I have two Toggle JS Functions written for the two toggles in example.
//TOGGLE
$('.toggle-view li').click(function () {
var text = $(this).children('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).children('.toggle').addClass('tactive');
} else {
text.slideUp('fast');
$(this).children('.toggle').removeClass('tactive');
}
});
//TOGGLE L2
$('.toggle-view2 li').click(function () {
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
P.S. I haven't written the JS Code, I am using someone's template.
Thanks! :)

Seems like a pretty simple solution...
It's happening because the toggle currently activates whenever you click anythin inside of the li element (which includes the other toggle elements: .toggle2).
The solution therefore is to make it only activate the toggle when the .toggle/h6 element is clicked and change $(this).children(...) to $(this).siblings(...)
You can use the following as things are (same changes in TOGGLE and TOGGLE L2):
//TOGGLE
$('.toggle-view li .toggle').click(function () { // Changed selector
var text = $(this).siblings('.t'); // Changed to .siblings(...)
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive'); // Removed .children(...)
} else {
text.slideUp('fast');
$(this).removeClass('tactive'); // Removed .children(...)
}
});
//TOGGLE L2
$('.toggle-view2 li .toggle2').click(function () {
var text2 = $(this).siblings('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).removeClass('tactive2');
}
});
OR
Just use the first section...
//TOGGLE
$('.toggle-view li .toggle').click(function () {
var text = $(this).siblings('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive');
} else {
text.slideUp('fast');
$(this).removeClass('tactive');
}
});
and rename all of the .t2, .toggle2 etc. in your html to the same as the first one (i.e. .t2 becomes .t)

use event.stopPropagation()
i have updated jsfiddle
$('.toggle-view2 li').click(function (event) {
event.stopPropagation();
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});