Topic: help with a jquery menu problem Pages that link to <a href="https://ozoneasylum.com/backlink?for=31006" title="Pages that link to Topic: help with a jquery menu problem" rel="nofollow" >Topic: help with a jquery menu problem\
 
Author Thread
DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 05-13-2009 14:03 Edit Quote

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

 IP logged posted posted 05-14-2009 10:00 Edit Quote

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

 IP logged posted posted 05-14-2009 23:28 Edit Quote

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

 IP logged posted posted 05-15-2009 13:46 Edit Quote

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

 IP logged posted posted 05-15-2009 16:34 Edit Quote

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

 IP logged posted posted 05-18-2009 15:22 Edit Quote

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

 IP logged posted posted 05-31-2011 11:08 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu