We Keep Coding

How to hide a collapsed element if another one is shown

I have 3 buttons which when clicked collapses and a form is shown. What I want is if one is already collapsed then I want it to hide again if another one is clicked.
My fiddle: https://jsfiddle.net/77soggnv/
This is my js code:
$(document).ready(function(){
//See which panel has been clicked
$("#citizen").click(function(){
$(this).data('clicked', true);
});
$("#organisation").click(function(){
$(this).data('clicked', true);
});
$("#anonymous").click(function(){
$(this).data('clicked', true);
});
//Hide the other panels if one is clicked
if($("#citizen").data('clicked')){
$("#organisation").collapse("hide");
$("#anonymous").collapse("hide");
}
if($("#organisation").data('clicked')){
$("#citizen").collapse("hide");
$("#anonymous").collapse("hide");
}
if($("#anonymous").data('clicked')){
$("#organisation").collapse("hide");
$("#citizen").collapse("hide");
}
});

Simply you can do it like:
$(".btn").click(function(){
$('.collapse.in').collapse('hide');
});
Updated Fiddle

Since the clicking elements have common classnames and structure, we don't have to attach event separately.
$(".btn.btn-primary").click(function() {
var next = $(this).next();
$(".collapse").not(next).slideUp();
next.slideToggle();
});
Fiddle
next() method will return the element after the current element.

Use multiple elements to trigger single onclick function

Right now this will work when I click "box1" but not "box2". I'd like to have a single tapBoxes variable that listens for a click on either box1 OR box2, and triggers the function. Any ideas?
var tapBoxes = document.getElementById("box1") || document.getElementById("box2");
tapBoxes.onclick = function() {
...
}

Define the function first. Then assign it to all the buttons you want.
tapBoxesClick = function() {
...
}
document.getElementById("box1").addEventListener("click", tapBoxesClick, false);
document.getElementById("box2").addEventListener("click", tapBoxesClick, false);

Give your elements a class, lets say myBox, then use jquery to do what you want:
$(document).ready(function(){
$('.myBox').click(function(){
//do what you want with the clicked box
})
})

jQuery UI: How to check whether another instance of widget is opened?

I've created custom widget by extending jQuery UI's Menu. It's basically needed to work with <select> HTML element like ui.selectmenu does, but display options in submenus:
$.widget("market.myMenu",$.ui.menu, {
// ...
_attachEvents: function(){
var self = this;
// menu is initially hidden
self.menuWrapper.hide();
self.button.on('click', function(){
if (self.originalSelect.is(':disabled')) {
self.disable();
} else {
self.menuWrapper.toggle();
}
return false;
});
$(document).on('click', function(){
self.menuWrapper.hide();
});
},
//...
}
}
The problem arise when this widget attached to multiple elements like:
someSelect.myMenu();
//...
anotherSelect.myMenu();
The problem is listed in the title and you can see it in _attachEvents() method:
when user clicks on someSelect it opens as should
then user clicks on anotherSelect it also opens
someSelect after step 2 should be closed, but it's not.
So how to check for such a case and fix this issue ?
EDIT:
this.originalSelect is <select> HTML element
this.button is div element. on which selected option text is displayed (basically same thing as ui.selectmenu does);

You can use a class to keep track of the state of your menus and use it to target instances that are opened. Something like this for example:
_attachEvents: function(){
var self = this;
// menu is initially hidden
self.menuWrapper.hide();
self.button.on('click', function(){
if (self.originalSelect.is(':disabled')) {
self.disable();
} else {
// before you open a menu, you close the opened ones
$('menu-opened').each(function(){
$(this).myMenu('instance').hideWrapper();
});
self.menuWrapper.toggleClass('menu-opened');
self.menuWrapper.toggle();
}
return false;
});
$(document).on('click', function(){
self.menuWrapper.hide();
});
},
hideWrapper: function(){
var self = this;
self.menuWrapper.hide();
self.menuWrapper.removeClass('menu-opened');
}

I've found solution. It's based upon Julien Grégoire proposal to use css marker class.
What I'm doing is adding class ui-mymenu-wrap to self.menuWrapper element. So all widgets have those identifier. The next thing I do is after clicking on one widget I'm closing all others menus and then open/close widget on which click was made.
_attachEvents: function(){
var self = this;
// menu is initially hidden
self.menuWrapper.hide();
self.button.on('click', function(event){
if (self.originalSelect.is(':disabled')) {
self.disable();
} else {
// hide all opened menus
$('.ui-mymenu-wrap').not(self.menuWrapper).hide();
self.menuWrapper.toggle();
}
return false;
});
$(document).on('click', function(){
self.menuWrapper.hide();
});
},

JQuery hiding/showing closest divs

When a user clicks on a certain icon, I want to hide/show relevant divs that are appropriate upon that action.
This is the JQuery I use:
$('.aTask').on('click','.descHide',function(){
$(this).closest('.taskDesc').hide();
$(this).closest('.descShow').show();
$(this).closest('.descHide').hide();
});
$('aTask').on('click','.descShow',function(){
$(this).closest('.taskDesc').show();
$(this).closest('.descShow').hide();
$(this).closest('.descHide').show();
});
$('#showTasks').on('click','.delete',function(){
$(this).closest('.aTask').remove();
});
But the intended actions do not happen as can be shown in this JSFIddle. Where I would click on the minus sign a plus sign should appear and the text below should either disappear or appear.

Use .parent().find(...) instead of .closest(...). Also, ids must be unique.
Fiddle
$('.aTask').on('click', '.descHide', function () {
$(this).parent().find('.taskDesc').hide();
$(this).parent().find('.descShow').show();
$(this).parent().find('.descHide').hide();
});
// you had a typo here $('aTask')
$('.aTask').on('click', '.descShow', function () {
$(this).parent().find('.taskDesc').show();
$(this).parent().find('.descShow').hide();
$(this).parent().find('.descHide').show();
});
$('#showTasks').on('click', '.delete', function () {
$(this).closest('.aTask').remove();
});

How to remove class after it been added

So I need a little bit of help. I'm playing around with addClass and removeClass and I can't seem to remove a class after it's set. What I basically want is:
When someone clicks an h3, it adds to its parent div class
When someone clicks a div with added class, class needs to be removed
First step I got out of way and it's working
$(function(){
$('div h3.itemTitle').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
Now when I define:
$(function(){
$('div.active').on('click', function(){
$(this).removeClass('active');
});
});
It does nothing, as if it doesn't see classes. It sets only those set in onload...
Help, anyone?

The child element "h3.itemTitle" already had a click event listener on it and the parent can't actually capture the click event.
Your $('div.active').on('click', ...) never actually fires because you click the h3 not the div.
I recommend this approach: http://jsfiddle.net/c3Q6Q/
$('div h3.itemTitle').on('click', function () {
// saves time not to write $(this).parent() everything so i store in a _parent var
var _parent = $(this).parent();
if (_parent.hasClass('active')) {
_parent.removeClass('active');
} else {
_parent.addClass('active').siblings().removeClass('active');
}
});

Try
$('body').on('click','div.active', function(){$(this).removeClass('active');});
Instead of
$('div.active').on('click', function(){$(this).removeClass('active');});

I would go with this way:
$('div').on('click', function(e){
var el = e.target;
if($(el).is('h3') && $(el).hasClass('itemTitle')){
$(this).parent().addClass('active').siblings().removeClass('active');
}else if($(el).is('div') && $(el).hasClass('active')){
$(this).removeClass('active');
}
});

Not sure why every is talking about elements generated outside of the initial DOM load.
Here's a JSFiddle showing that it works: http://jsfiddle.net/H25bT/
Code:
$(document).ready(function() {
$('.itemTitle').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
/* $('.parent').on('click', function() {
$(this).removeClass('active');
}); */
$('.clicky').on('click', function() {
$(this).parent().removeClass('active');
});
});
The reason it's not working for you is that if you put the removeClass click event on the parent div itself, clicking on the child text causes a conflict with which click handler to use, and it won't work out. Code works fine if you don't assign the click to the parent div itself.