I found this sweet accordion menu and I want to modify it a little bit. I want to add a close function, so if I click on the h2 that's active it will slide up and close. How can I achieve that?
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if ($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
http://jsfiddle.net/tovic/CzE3q/
You need to check to see if the item you clicked on already has the active class. Try this:
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function () {
var openPanel = !$(this).hasClass('active')
$('#accordion h2').removeClass('active').next().slideUp('slow');
openPanel && $(this).toggleClass('active').next().slideDown('slow');
});
Example fiddle
Add an else block to the click event handler that closes the pane if it is not hidden.
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}else{
$('#accordion h2').removeClass('active').next().slideUp('slow');
}
});
});
JS Fiddle: http://jsfiddle.net/CzE3q/720/
Related
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
I have this jQuery code that opens an accordeon on hover but i need to make it work each tab on click instead, i've tried to change the "hover" to "click" but no success, could someone here please help me ?
Thanks in advance.
$(function() {
$('#accordion > li').hover(function() {
var $this = $(this);
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
}, function() {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
});
});
the idea from Tushar Gupta is the only one that's partially working, it opens the accordeon on click, but if the user clicks another tab while one is open there's a bug...
i make a fiddle with the whole code.
http://jsfiddle.net/C8Kp8/ <-- Tushar Gupta's solution
http://jsfiddle.net/SHmuc/ <-- Original Code
thank you all for your help, its really appreciated.
You can use .toggle() or this
$(function() {
$('#accordion > li').click(function() {
var $this = $(this);
if ($this.hasClass('open')) {
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
$this.removeClass('open');
}
else {
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
$this.addClass('open');
}
});
});
Take a look at this. #Alex's answer is good but ignores the first click, and doesn't close the open elements when a closed element is clicked. FIDDLE. In this version, the more links in the accordion elements also work.
$(function() {
$('#accordion li').click(function() {
var $this = $(this);
if (!$this.hasClass('open')) {
// open clicked accordion element
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
// close other open accordion element
$("#accordion li.open").stop().animate({'width':'115px'},1000);
$("#accordion li.open .heading").stop(true, true).fadeIn();
$("#accordion li.open .description, #accordion li.open .bgDescription").stop(true, true).fadeOut();
$("#accordion li.open").removeClass("open");
$this.addClass('open');
}
else {
// close this accordion element
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
$this.removeClass('open');
}
});
$('#accordion > li a').click(function(e){
e.stopPropagation();
});
});
So I found this fiddle here: http://jsfiddle.net/8qPvp/4/
I thought I'd use it just for personal education purposes.
I'm really new with JS, and I noticed that the opened parent does not go back on click, like it opens. How could this be fixed?
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
});
What about this:
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
$(document).click(function()
{
$('li > ul:visible').hide();
})
$('.menu li').click(function(e)
{
e.stopPropagation();
})
So by default i make whenever there is clicked ANYWHERE in the document, your visible menu will be hidden. However you don't want this to happen when you open a new menu(would be; made visible and made hiden directly). So i make a exception that catch when you want to open a new menu and i'll cancel the document click event.I use event.stopPropagation() to cancel a event.
jsFiddle
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
}).mouseleave(function(){
$(this).children("ul").hide();
});
});
Check this fiddle http://jsfiddle.net/Aveendra/8qPvp/18/
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/
I tested out the script below in jsfiddle and it works fine, can someone guide me how to fix it? This is the url that I need it working in, the wizard style menu at the top right should should have each item set to active when clicked and then removed when another menu item is clicked: http://morxmedia.com/clients/temp/45p/index_vertical.html
Here is the code I am using for this:
<script type="text/javascript">
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
</script>
You are binding the click event to div elements when you should bind them to a elements like so
$(document).ready(function(){
$('.wizard-steps > div > a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});
Try this.
$(function() {
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
});
});
better to include that on a ready
$(document).ready(function() {
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});
As far as I can see (in your CSS). The class active should go on the div under wizard-steps and the parent of the a-tag.
Try this:
<script type="text/javascript">
$('.wizard-steps div a').click(function(e) {
if (e.preventDefault)
e.preventDefault();
else
e.stop();
$('.wizard-steps div').removeClass('active');
$(this).parent().addClass('active');
});
</script>
It can be done in another way using jquery using .not()
Jquery Code:
$('.wizard-steps div').click(function() {
$('.wizard-steps div').not(this).removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/surendraVsingh/PLbbr/