Hide DIV after click (jQuery) - javascript

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

Related

adding tab dropdown on slide up and down div on click

This drop down div is view after click packages and i want to add when select choose your destination change the icon set. i tried but when click drop down item on list main div slide up...
my jquery code is below
//SLIDE UP AND DOWN FUNCTION
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
if($packages.is(":visible")){
$packages.slideUp(350);
setTimeout(function () {
$('li.dropdown-packages').removeClass('dwn-arrow');
}, 800);
}
if($packages.is(":hidden")){
$packages.slideDown(350);
setTimeout(function () {
$('li.dropdown-packages').addClass('dwn-arrow');
},800);
}
});
Use the slideToggle() method.
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
$packages.slideToggle();
});

CSS: Failing to display unless refreshed - Navigation bar

I have been working on navigation bar and the strangest issue is occurring.
Please use the JSFiddle link to see what I mean.
To duplicate the error:
Run the code when the desktop view is active i.e. when the navigation links are in a line.
Then resize the screen till the "click me" is displayed.
Then press it.
Now run the code while you see the "click me" and press it again.
JS information
jQuery(document).ready(function($) {
// UserCP
$('.rotate').on('click', function() {
$(this).toggleClass("down");
});
$('.nav-start').on('click', function() {
$("#nav2").removeClass("hidden");
$('#nav2 li a').stop().slideToggle('100');
return false;
});
$(document).ready(function() {
$('#nav2 li a').stop().slideToggle('100');
});
$('body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length) {
if ($('#nav2 li a').is(":visible")) {
$('html, body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
};
};
});
});
FIXED - UPDATED JSFiddle! Thanks #Louys Patrice Bessette #Titus #Rick
You are using two click events on this "Click me" li...
(One on .navstart and one on .rotate)
It may not be an issue, but this make the code harder to read.
Then, when you slideToggle(), if you want the submenu to slide down, it has to be hidden.
Because, since you remove the hidden class (probably usefull on load), the submenu is visible.
A Toggle hides it.
I simplified your script to this.
Have a look at this updated Fiddle.
$(document).ready(function() {
// Show submenu on "Click me"
$('.nav-start').on('click', function() {
$('.rotate').toggleClass("down");
$("#nav2").removeClass("hidden");
var subNav = $('#nav2 li a');
if(subNav.css("display")=="block"){
subNav.stop().slideUp('100');
}else{
subNav.stop().slideDown('100');
}
return false;
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
// Hide submenu on document click
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
$('#nav2 li a').stop().slideUp('100');
};
});
});

jQuery Accordion Panels that wont close

I'm new to jquery and I have the following code that creates accordion style panels from divs. The code runs fine, however, if I click on a panel that's already open, it closes the panel, and then instantly reopens it. This only applies if its an already active panel. If I click a different one it works fine.
$(document).ready(function() {
$('.accordion-section-title').addClass('active');
// Open up the hidden content panel
$('.accordion ' + '#accordion-1').slideDown(300).addClass('open');
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
I've attached a js fiddle, It looks like the issue happens whenever I wrap the title in any tag, if its just blank text, it works fine.
https://jsfiddle.net/russ1337/ynfs4zw3/
based on your fiddle, I have found the problem.
Please see updated fiddle:
https://jsfiddle.net/ynfs4zw3/2/
The problem was the following code:
if($(e.target).is('.active')) {
close_accordion_section();
}else {
...
}
Your if statement said that if e.target is active but in if you clicked directly on the text, the target was the inside the .accordion-section-title div. Which did not have the .active class.
Try removing the close_accordion_section(); in the else statement:
$(document).ready(function() {
$('.accordion-section-title').addClass('active');
// Open up the hidden content panel
$('.accordion ' + '#accordion-1').slideDown(300).addClass('open');
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});

collapsible accordion return to active status

Need help guys im new to javascript, how can i make the status of collapsed icon to "+" again when i click the current tab to collapsed? my problem is the "-" current tab has that sign whenever i close the tab again, here's the code and the sample link: http://www.dev.redefinegraphicstudio.com/acp/SLOCPI%20Mobile/HOMEPAGE.html
$(document).ready(function(){
$('.expand-collapse-menu > li > a').on('click', function(){
var $this = $(this);
if($this.parent().hasClass('current')){
$this.parent().parent().find('ul').stop().slideUp();
}else{
$this.parent().parent().find('li').each(function(){ $(this).removeClass('active'); })
$this.parent().parent().find('ul').stop().slideUp();
$this.parent().toggleClass('active');
$this.parent().find('ul').stop().slideToggle(500);
}
});
$(".tabs-menu").find('li').each(function(){
if($(this).hasClass('current')){
var tab = $(this).find('a').attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
}
});
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
The problem is your first function, when you change it to
$('.expand-collapse-menu > li > a').on('click', function () {
var $this = $(this);
if ($this.parent().hasClass('active')) { // change to active instead of current
$this.parent().toggleClass('active'); // add this line
$this.parent().parent().find('ul').stop().slideUp();
} else {
$this.parent().parent().find('li').each(function () {
$(this).removeClass('active');
});
$this.parent().parent().find('ul').stop().slideUp();
$this.parent().toggleClass('active');
$this.parent().find('ul').stop().slideToggle(500);
}
});
the class active that sets the background color to orange and the minus sign as background image will also be toggled for the active element. You could also remove the $this.parent().toggleClass('active'); from the if and else clauses and set it below as it should be toggled anyway.
As mentioned in the comments, if you want to keep changing the class of the clicked element in the if and else clauses, you can also consider to use addClass("active") and removeClass("active") instead of toggleClass("active") as it's known if the class should be added or removed.
I've set up a Fiddle with the relevant part from your page.

Toggle tab content

I have a vertical tab that which is working fine. But I am facing one problem here. I need this tab goes hidden when I click the tab again, something like toggling.
Like if I click tab 2 it opens it's content but I am wanting if I click on the tab 2 again it goes away and become normal. As I am not very good in jQuery I am not finding how to make this or I am not sure if this is possible.
FIDDLE
JS
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs li a').click(function(e) {
e.preventDefault();
if ($(this).attr("id") == "current"){ //detection for current tab
return
}
else{
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$( $(this).attr('href')).fadeIn(); // Show content for current tab
}
});
});
Thanks in advance.
You were not checking the right item in your if statement: you were looking for the id of your a item, not li.
See update: http://jsfiddle.net/5ezT3/53/
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs li a').click(function(e) {
e.preventDefault();
if ($(this).parent().attr("id") == "current"){ //detection for current tab
$($(this).attr('href')).fadeToggle();
return;
}
else{
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$( $(this).attr('href')).fadeToggle(); // Show content for current tab
}
});
});
As mentioned by #urbz, fadeIn/out have been changed to fadeToggle to allow opening and closing several times
Nicolas R's answer is great, but if I click on Tab1 again the corresponding content will not show. May be he missed it in hurry.
Reset your ids also :
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs li a').click(function(e) {
e.preventDefault();
if ($(this).parent().attr("id") == "current"){ //detection for current tab
$($(this).attr('href')).fadeOut();
$("#tabs li").attr("id",""); //Also Reset id's here.
return;
}
else{
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$( $(this).attr('href')).fadeIn(); // Show content for current tab
}
});
});

Categories

Resources