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();
});
});
Related
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.
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
}
});
});
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
When I click a parent menu (like Domains), it shows it's children, when I click one of them (like, My Domains), the page reloads with the parent menu closed (not expanded, as the image bellow)
The classes are "active" for menu active (blue background) and "open" for visible children
These are the JS codes:
// Handle clicking on the naviagtion dropdown items
jQuery('.navbar .toggle > a').click(function() {
if (!jQuery(this).next().is(":visible")) {
jQuery('.toggle a').removeClass('open');
jQuery('.toggle ul:visible').hide();
}
jQuery(this).toggleClass('open');
jQuery(this).next().slideToggle();
});
// Tabs Changer
// ===============================
//Default Action
jQuery(".tab-content").hide(); //Hide all content
if (jQuery(location).attr('hash').substr(1)!="") {
var activeTab = jQuery(location).attr('hash');
jQuery("ul").find('li').removeClass('open');
jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
jQuery(activeTab+"nav").addClass("active");
jQuery(activeTab).show();
} else {
jQuery("#tabs ul.nav .nav-tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab-content:first").show(); //Show first tab content
}
//On Click Event
jQuery("#tabs ul.nav li").click(function() {
jQuery("ul").find('li').removeClass('open');
jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
if (activeTab.substr(0,1)=="#" && activeTab.substr(1)!="") { //Determine if a tab or link
jQuery(".tab-content").hide(); //Hide all tab content
jQuery(activeTab).fadeIn(); //Fade in the active content
return false;
} else {
return true; // If link allow redirect
}
});
});
Click Login to see a live example of the menu:
https://whmcsdesigns.com/demo/clientarea.php?action=domains
If you load the page and enter the following, in the console, you will see that it works as you expect:
jQuery(".navbar .toggle.active > .nav-link").addClass('open');
jQuery(".navbar .toggle.active > ul").css('display', 'block');
However, you may run into some timing issues with this. It's not the best practice, to wrap it in jQuery(window).on, however it will get the job done:
jQuery(window).on('load', null, {}, function () {
jQuery(".navbar .toggle.active > .nav-link").addClass('open');
jQuery(".navbar .toggle.active > ul").css('display', 'block');
});
Normally, it should run synchronously, but for the sake of getting it to work, using window.onload will run this code when everything is finished loading, where we can safely assume that your menu will be ready to accept this code. So this may run much later (we're talking milliseconds), after the menu is initially setup up and ready for this code.
use event.preventDefault()
// Handle clicking on the naviagtion dropdown items
jQuery('.navbar .toggle > a').click(function(e) {
e.preventDefault();
if (!jQuery(this).next().is(":visible")) {
jQuery('.toggle a').removeClass('open');
jQuery('.toggle ul:visible').hide();
}
jQuery(this).toggleClass('open');
jQuery(this).next().slideToggle();
});
reference event.preventDefault()
in CSS you can show/hide div when menu item is active
I am using a jQuery Accordion for my sidebar navigation. Currently I have 2 links which both have 'children' beneath them.
Here is my jsFiddle: http://jsfiddle.net/6Eh8C/
You'll notice that when you click 'About Us', the Gallery closes. This shouldn't happen. Gallery should only close when I click 'Gallery'.
How do I fix this?
Here is my jQuery:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
$('.slides_item').children('div').css('background','#ededed')
});
Many thanks for any pointers :-)
I think you just want to remove one line:
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
// Remove this line, you don't want to slide up other uls.
// $(this).siblings('ul').slideUp("slow");
});
Example: http://jsfiddle.net/6Eh8C/1/