Topic: help with a jquery menu problem (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=31006" title="Pages that link to Topic: help with a jquery menu problem (Page 1 of 1)" rel="nofollow" >Topic: help with a jquery menu problem <span class="small">(Page 1 of 1)</span>\$

DL-44 Lunatic (VI) Inmate From: under the bed Insane since: Feb 2000	posted 05-13-2009 14:03 Hello I am using a nice compact jquery accordion menu script found here: http://www.i-marco.nl/weblog/archive/2008/05/08/simple_jquery_accordion_menu__?utm_campaign=searchlanding I have gone through the extremely painful exercise of reading all of the comments, and though my question was asked, it was never answered. Can someone please tell how to add a class to the 'active' li element when its sub-content is expanded, and remove the class when it is not? Someone offered a solution that added a class to the expanded sub-content element itself...but that is pretty redundant. Thanks! edit: I am also trying to add a 'show all' and 'hide all' functionality and screwing it up all around, if anyone can straighten me up out on that... (Edited by DL-44 on 05-13-2009 16:27)
Blaise Paranoid (IV) Inmate From: London Insane since: Jun 2003	posted 05-14-2009 10:00 This code code: $(document).ready(function(){ $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); }); }); Is taken from The Web Designer Wall under the accordian example, and it seems to address your question. When a heading is clicked it toggles a class (active) on the element, and removes the class (active) from all sibling elements. Does this help? Cheers,
DL-44 Lunatic (VI) Inmate From: under the bed Insane since: Feb 2000	posted 05-14-2009 23:28 Ok, I believe I grasp how it's set up... The script I am using is not the official accordion plugin, but that looks generic enough that I can work it out I am very very out of my element with many aspects of Javascript still..hopefully by the time I am done here, I will be a bit better off! will have to wait until morning to play. thanks
DL-44 Lunatic (VI) Inmate From: under the bed Insane since: Feb 2000	posted 05-15-2009 13:46 Was able to work the two relevant lines in without much headache. thanks again
Tao Maniac (V) Inmate From: The Pool Of Life Insane since: Nov 2003	posted 05-15-2009 16:34 Yay. In-dented is up and running again and looking as groovy as ever.
DL-44 Lunatic (VI) Inmate From: under the bed Insane since: Feb 2000	posted 05-18-2009 15:22 Hah...yeah, I finally fixed the broken bit that was screwing the whole site up Still haven't done anything else with it though... I have managed to get both parts of my question up and running now, for the record. the original menu code is this: code: function initMenus() { $('ul.menu ul').hide(); $.each($('ul.menu'), function(){ $('#' + this.id + '.expandfirst ul:first').show(); }); $('ul.menu li a').click( function() { var checkElement = $(this).next(); var parent = this.parentNode.parentNode.id; if($('#' + parent).hasClass('noaccordion')) { $(this).next().slideToggle('normal'); return false; } if((checkElement.is('ul')) && (checkElement.is(':visible'))) { if($('#' + parent).hasClass('collapsible')) { $('#' + parent + ' ul:visible').slideUp('normal'); } return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#' + parent + ' ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } } ); } $(document).ready(function() {initMenus();}); I changed it as follows, after Blaise's tips on question 1, and a lot of trial and error with question 2: code: function initMenus() { $('ul.menu ul').hide(); $.each($('ul.menu'), function(){ $('#' + this.id + '.expandfirst ul:first').show(); }); //start show/hide all attempts................................................... $('#menuhide').click( function(){ $('ul.menu li a').removeClass("menu-active"); $('ul.menu ul').slideUp('normal'); } ); $('#menushow').click( function(){ $('ul.menu li a').addClass("menu-active"); $('ul.menu ul').slideDown('normal'); } ); //end show/hide all attempts................................................... $('ul.menu li a').click( function() { //remove class addition: $('ul.menu li a').removeClass("menu-active"); var checkElement = $(this).next(); var parent = this.parentNode.parentNode.id; if($('#' + parent).hasClass('noaccordion')) { $(this).next().slideToggle('normal'); return false; } if((checkElement.is('ul')) && (checkElement.is(':visible'))) { if($('#' + parent).hasClass('collapsible')) { $('#' + parent + ' ul:visible').slideUp('normal'); } return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#' + parent + ' ul:visible').slideUp('normal'); checkElement.slideDown('normal'); //add class addition: $(this).toggleClass("menu-active"); return false; } } ); } $(document).ready(function() {initMenus();}); I am wondering if my show/hide all solution is a good one, or if there something simpler? This works for me, just trying to make sure I am not unnecessarily bloating my code... (Edited by DL-44 on 05-18-2009 15:25)
coach Nervous Wreck (II) Inmate From: Insane since: May 2011	posted 05-31-2011 11:08 Edit TP: spam removed

Topic: help with a jquery menu problem (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=31006" title="Pages that link to Topic: help with a jquery menu problem (Page 1 of 1)" rel="nofollow" >Topic: help with a jquery menu problem <span class="small">(Page 1 of 1)</span>\$

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted 05-13-2009 14:03

Hello

I am using a nice compact jquery accordion menu script found here: http://www.i-marco.nl/weblog/archive/2008/05/08/simple_jquery_accordion_menu__?utm_campaign=searchlanding

I have gone through the extremely painful exercise of reading all of the comments, and though my question was asked, it was never answered.

Can someone please tell how to add a class to the 'active' li element when its sub-content is expanded, and remove the class when it is not?
Someone offered a solution that added a class to the expanded sub-content element itself...but that is pretty redundant.

Thanks!

edit:
I am also trying to add a 'show all' and 'hide all' functionality and screwing it up all around, if anyone can straighten me up out on that...

(Edited by DL-44 on 05-13-2009 16:27)

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted 05-14-2009 10:00

This code

code:

$(document).ready(function(){

    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h3").click(function(){
      $(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");
      $(this).toggleClass("active");
      $(this).siblings("h3").removeClass("active");
   });

});

Is taken from The Web Designer Wall under the accordian example, and it seems to address your question. When a heading is clicked it toggles a class (active) on the element, and removes the class (active) from all sibling elements.

Does this help?

Cheers,

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted 05-14-2009 23:28

Ok, I believe I grasp how it's set up...
The script I am using is not the official accordion plugin, but that looks generic enough that I can work it out
I am very very out of my element with many aspects of Javascript still..hopefully by the time I am done here, I will be a bit better off!

will have to wait until morning to play.

thanks

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted 05-15-2009 13:46

Was able to work the two relevant lines in without much headache.

thanks again

Tao
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Nov 2003

posted 05-15-2009 16:34

Yay.
In-dented is up and running again and looking as groovy as ever.

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted 05-18-2009 15:22

Hah...yeah, I finally fixed the broken bit that was screwing the whole site up Still haven't done anything else with it though...

I have managed to get both parts of my question up and running now, for the record.
the original menu code is this:

code:

function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){
		$('#' + this.id + '.expandfirst ul:first').show();
	});
	
       $('ul.menu li a').click(
		function() {
			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if($('#' + parent).hasClass('noaccordion')) {
				$(this).next().slideToggle('normal');
				return false;
			}
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').slideUp('normal');
				checkElement.slideDown('normal');
				return false;
			}
		}
	);
}
$(document).ready(function() {initMenus();});

I changed it as follows, after Blaise's tips on question 1, and a lot of trial and error with question 2:

code:

function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){
		$('#' + this.id + '.expandfirst ul:first').show();
	});
	
	 
    //start show/hide all attempts...................................................
	$('#menuhide').click(
		function(){
			$('ul.menu li a').removeClass("menu-active");
			$('ul.menu ul').slideUp('normal');
		}
	);
	$('#menushow').click(
		function(){
			$('ul.menu li a').addClass("menu-active");
			$('ul.menu ul').slideDown('normal');
		}
	);
   //end show/hide all attempts...................................................

	
       $('ul.menu li a').click(
		function() {

			
               //remove class addition:
			$('ul.menu li a').removeClass("menu-active");


			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if($('#' + parent).hasClass('noaccordion')) {
				$(this).next().slideToggle('normal');
				return false;
			}
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').slideUp('normal');
				checkElement.slideDown('normal');


		//add class addition:
				$(this).toggleClass("menu-active");


				return false;
			}
		}
	);
}
$(document).ready(function() {initMenus();});

I am wondering if my show/hide all solution is a good one, or if there something simpler? This works for me, just trying to make sure I am not unnecessarily bloating my code...

(Edited by DL-44 on 05-18-2009 15:25)

coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

posted 05-31-2011 11:08

Edit TP: spam removed

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: help with a jquery menu problem (Page 1 of 1)

Insert Slimies »

Insert UBB Code »