first click on accordion not working - javascript

my accordion is not working properly.
on the first time you click, the content is ont displaying . . . .
otherwise if you click the second time and after it does appear . .
Any help will be brilliant,
Here is my fiddle:
https://jsfiddle.net/ugddnof4/
All the thtml is there.
OR below is my js:
(function($) {
$('.accordion > li:eq(0) a').addClass('active').next().slideDown();
$('.accordion a').click(function(j) {
var dropDown = $(this).closest('li').find('ul.accordion-content li, p, ul.accordion-content');
$(this).closest('.accordion').find('ul.accordion-content li, p, ul.accordion-content').not(dropDown).slideUp();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).closest('.accordion').find('a.active').removeClass('active');
$(this).addClass('active');
}
dropDown.stop(false, true).slideToggle();
j.preventDefault();
});
})(jQuery);
thanks a lot for all your time!

This seems to work
https://jsfiddle.net/9erfLokh/1/
New js:
(function($) {
$('.accordion > li:eq(0) a').addClass('active').next().slideDown();
$('.accordion a').click(function(j) {
var dropDown = $(this).closest('li').find('ul.accordion-content');
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).closest('.accordion').find('a.active').closest('li').find('ul.accordion-content').slideUp();
$(this).closest('.accordion').find('a.active').removeClass('active');
$(this).addClass('active');
}
dropDown.stop(false, true).slideToggle();
j.preventDefault();
});
})(jQuery);
I think your problem was mainly that dropDown was returning a whole set of dom objects, and you were running slideToggle on all of them. This version will only close a block if there is one active, and will always toggle the clicked one, but takes care to only run slideToggle on a single element.

Related

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();
});
});

Broken Multi-Tier JQuery Accordion

JSFiddle
http://jsfiddle.net/5rkrq4bw/strong text
JQuery Code
// Side Menu Starts
$('.SideNav .Menu a.MenuDrop').click(function(event){
event.preventDefault();
if(!$(this).hasClass('Active')) {
if(!$(this).parent().parent().hasClass('Active') && $(this).next().hasClass('sub-menu')) {
$(this).next().slideToggle();
$(this).addClass('Active');
} else {
$('.SideNav .Menu li ul').slideUp();
$(this).next().slideToggle();
$('.SideNav .Menu a.MenuDrop').removeClass('Active');
$(this).addClass('Active');
}
}
});
//Side Menu Ends
The Problem
Trying to integrate multiple tiers I am finding the problem of only being able to have one open at a time and checking to see if any others are open to close them.
What should happen
Demo
Category
Sub-Cat
Link
Link
Link
Sub-Cat
Link
Link
Link
Category
Sub-Cat
Link
Link
Link
Sub-Cat
Link
Link
Link
Explanation
Only one 'Category' to be expanded at a time
Only one 'Sub-Cat' inside to be expanded at a time
Adding / removing of 'Active' class.
Resolved: http://jsfiddle.net/wo4sj4pt/
JQuery Code:
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($ul.find('a'), function(){
$(this).click(function(e){
activate(this);
return void(0);
});
});
var active = $('.Active');
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
function activate(el,effect){
if (!effect) {
$(el)
.toggleClass('active')
.parent('li')
.siblings()
.find('a')
.removeClass('active')
.parent('li')
.children('ul, div')
.slideUp('fast');
}
$(el)
.siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
Usage:
Link to JQuery and the above script
Make a multi-level list
Give your list a class/ID name such as '.SideNav'
Tell the script this is your accordion $('.SideNav').accordion();
http://jsfiddle.net/sabithpocker/5rkrq4bw/2/
$('.SideNav .Menu a.MenuDrop').click(function(event){
event.preventDefault();
console.log(this);
var subMenuToExpand = $('ul.sub-menu', $(this).parent());
var otherVisibleSubMenu = $('ul.sub-menu:visible', $(this).parents('.Menu'));
otherVisibleSubMenu.hide();
subMenuToExpand.show();
});
$('.SideNav .Menu a.MenuDrop').click(function(event){
$('ul.sub-menu:visible', $(this).parents('.Menu')).slideUp(50);
$('ul.sub-menu', $(this).parent()).slideDown();
});

How can I use jQuery to toggle between 2 classes?

I am not sure toggleClass is the best way to do this, but I have a accordion menu and I am attempting to alternate the icon/image on the right side from a RIGHT arrow to a DOWN arrow.
The first click on the 3 menu items shows the DOWN image (.icon-03) but when I switch between the accordion items it does not go back to the RIGHT arrow image/class (.icon-04).
thoughts?
/* Accordion */
$(document).ready(function () {
$('#accordionFAQ > li > a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#accordionFAQ li ul').slideUp();
$(this).next().slideToggle();
$('#accordionFAQ li a').removeClass('active');
$(this).addClass('active');
//add down arrow
$('> span', this).toggleClass('icon-03 icon-04');
//prevent page reload
e.preventDefault();
}
});
});
Demo JS Fiddle: http://jsfiddle.net/957Fs/
First of all, $(this).attr('class') != 'active' is very inefficient (and possibly fails to work altogether), use $(this).hasClass('active') instead.
After your comment, I re-added the classes - the following should work:
$('#accordionFAQ > li > a').click(function(e){
if (! $(this).hasClass('active') ){
$('.active')
.find('span').toggleClass('icon-03 icon-04')
.end().removeClass('active')
.next().slideUp();
$(this).find('span').toggleClass('icon-03 icon-04')
.end().addClass('active')
.next().slideDown();
//prevent page reload
e.preventDefault();
}
});
When I look at the JSFiddle example it works for me, so I guess it's updated already. I'd like to make a suggestion though: it's perhaps a good idea to just toggle a class (e.g. 'is-active') on your list items and handle the rest with pure CSS. For example:
var $faq = $('#accordionFAQ');
$faq.on('click', '> li > a', function (event) {
$(this).parent().toggleClass('is-active');
});
In your CSS you could do something like this:
#accordionFAQ > li > a span {
// width, height etc
background-position: x y;
}
#accordionFAQ > li.is-active > a span {
background-position: x y;
}
Just an idea; hope it's helpfull.
/* Accordion */
$(document).ready(function () {
var accordionFAQ = $('#accordionFAQ');
// let's use jQuery's .on() rather than .click()
accordionFAQ.find('a').on({
click:function(e){
// prevent the default action
e.preventDefault();
// setup some variables
var that = $(this);
// close open ULs
accordionFAQ.find('ul').slideUp();
// remove .active from other controller
accordionFAQ.find('.active').removeClass('active');
// add .active to clicked controller and show UL
that.addClass('active').next().slideDown();
// remove .right from span
accordionFAQ.find('.right').removeClass('right');
// add .right to current controller's span
that.find('span').addClass('right');
}
});
});
Then, you can have span's default image be the left arrow. and when you add a .right class, it will override the default image with a right arrow using CSS.
hope this helps.

Basic issue with jQuery Accordion

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/

Categories

Resources