Develop Reference

Why current opened div doesn't close

I have one question about jQuery close system. I have created this DEMO from codepen.io
In this demo you can see there are two div (red and blue). When you click the red div then the .CRtW11 will be an active. But after you click the blue div the .CRtW11 stayed on there; it needs to be inactive. What is the problem there, can anyone tell me ?
JS
// FOR cR
$("body").on("click", ".cR", function(event) {
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});

$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
This function wont work for the red and blue div as their click events are stopped in their respective click functions. So the simple solution will be to add the remove class function in the opposite click functions. i.e.
// FOR cR
$("body").on("click", ".cR", function(event) {
$(".BRc").removeClass("BRc-active");
event.stopPropagation();
var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
$('.CRtW11').not($current).removeClass('CRtW11-active');
var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
$(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
});
// FOR Br
$("body").on("click",".Br", function(event) {
$(".CRtW11").removeClass("CRtW11-active");
$(".ReaC").removeClass("ReaC-active");
event.stopPropagation();
var $current = $(this).find(".BRc").toggleClass("BRc-active");
$(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
$(".BRc").removeClass("BRc-active");
});

jQuery: click event can't work

I'm trying to change the area and the button value by clicking the different Tabs.
Here's my question:
First loading the page, the button effect is working, but after clicking the other Tabs, it can't work.
On clicking the second Tab, then clicking the area button, you'll find it can't work.
Here's part of my code:
$(document).ready(function () {
var _showTab = 0;
$('ul.tabs').each(function () {
$(this).find('li').each(function (k) {
if (k != 0) {
$($(this).find("a").attr("href")).hide();
} else {
$(this).addClass('active').append("<span class='tr_icon'></span>");
}
})
});
$('ul.tabs li').click(function () {
var $this = $(this),
_clickTab = $this.find('a').attr('href');
$this.addClass('active').append("<span class='tr_icon'></span>").siblings('.active').removeClass('active').children().remove('span');
// $(_clickTab).stop(false, true).fadeIn().siblings().hide();
paidChange();
areaChange();
return false;
}).find('a').focus(function () {
this.blur();
});
});
Here's all of my code:
Sorry for my poor English, and I hope you'll understand what I mean.

document.on click will trigger on dynamically added tabs.
Change
$('ul.tabs li').click(function() { });
to
$(document).on("click", 'ul.tabs li', function(){});

Show/hide info onClick

community!
The idea is to create a list with normal list with text and sometimes clickable links.
Problem:
How to make this list to close only when the button is pressed and not when the user click on any item inside the list or anywhere on screen.
Fiddle: jsfiddle.net/H2Chj/494/
HTML:
<button data-text-swap="Show" id="trigger">Hide</button>
<div id="drop">
Menu item 1
Menu item 2
Menu item 3
Menu item 4
</div>
Javascript
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
$("button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));}
else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));}
});
});

The one thing you had missing was stopping the propagation when you click on a link in the dropdown. this stops it from bubbling up to the $(document).click event handler.
$('#drop a').click(function(e){ e.stopPropagation(); });
I assume you had the $(document).click handler there so you could close the dropdown by clicking outside the dropdown menu.
see this fiddle: http://jsfiddle.net/o0m8p4bf/2/

Please use this javascript code:
$(document).ready( function(){
$("button").on("click", function() {
$('#drop').toggle();
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));}
else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));}
});
});

Hide DIV after click (jQuery)

I have a list item that displays a hidden div once its clicked. I want to be able to hide the div if the list item is click on again. How can I do this?
$(function () {
"use strict";
function resetTabs() {
$("#sub_content > div").hide(); //Hide all content
$("#tabs a").removeClass("current"); //Reset id's
}
$("#sub_content > div").hide(); // Initially hide all content
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
});
});
http://jsfiddle.net/E9mPw/
Thanks.

You can use fadeToggle()
$($(this).attr('name')).fadeToggle();
http://jsfiddle.net/E9mPw/2/

you just can add "if" statement, if you just want to fix your script
$("#tabs a").on("click", function (e) {
e.preventDefault();
if($(this).hasClass('current')){
resetTabs();
}
else{
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
http://jsfiddle.net/E9mPw/7/

You can use toggle jquery properties.
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).toggle("current");
});
You chould check this links

You can check if the a has the class current and fade it out accordingly:
$("#tabs a").on("click", function (e) {
e.preventDefault();
//resetTabs();
if($(this).hasClass("current"))
{
$(this).removeClass("current");
$($(this).attr('name')).fadeOut(); // Hide content for current tab
}
else
{
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
JSFiddle

JavaScript to make div visible after click

I currently have a button that I would like open a hidden div box that will then show a list to open a second div box. The code does not seem to be working for the JavaScript.
Here is the JavaScript:
$('#content1 div').each(function(i){
$(this).addClass('level1');
});
$('#content2 div').each(function(i){
$(this).addClass('level2');
});
$('#menu2 a').click(function (e) {
$('#content1 div.makeVisible').removeClass('makeVisible');
$(divToMakeVisible).addClass('makeVisible');
e.preventDefault();
});
$('div.level1 a').click(function (e) {
$('#content1 div.level1').removeClass('makeVisible');
divToMakeVisible = $(this).attr('href');
console.log(divToMakeVisible);
$(divToMakeVisible).addClass('makeVisible');
e.preventDefault();
});
$('div.level2 a').click(function (e) {
$('#content2 div.level2').removeClass('makeVisible');
divToMakeVisible = $(this).attr('href');
$(divToMakeVisible).addClass('makeVisible');
e.preventDefault();
});
The full code on JSFiddle can be found here: http://jsfiddle.net/nkxsP/20/