Accordion Menu R2

[Tony Barnes]

Ah, is that what that was for, sorry, i hadn't followed it very well

[Painstik]

Ah, is that what that was for, sorry, i hadn't followed it very well

I elaborated now with pictures... i think...

[mu574rd]

I recommend this php / html code modification instead of jquery accordion menu, effect is the same, the only thing is that there is no animation...

http://www.interspired.net/forum/viewto ... f=12&t=262

The problem is the "quoted" version does NOT work with ISC 5.5X and up. It is only compatible with 5.0X.
The jquery one listed here WORKS with the newer versions, and it works WELL.

[pagreen07]

I have this code implemented here (in staging):

http://74.119.234.6/~gingerbr/

This is the javascript I'm using:

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
var checkElement = $(this).next();
if(checkElement.is('ul')) {
$(this).next().slideToggle('fast');


return false;
}
}
);

}
$(document).ready(function() {initMenu();});
</script>

It works good - EXCEPT - that once a user arrives at the page they want to be on....the menu is collapsed. I'd like the active menu item to remain expanded. Is this possible? Has anyone figured out a modification for this?

[Tony Barnes]

I don't think anyone has sorted that yet, no. Hmmmm, I may go on the hunt though, just thought of a method that may work

[Tony Barnes]

Right, how's about this little bit of loveliness!!

Change your document ready function to this:

Code: Select all

$(document).ready(function() {
	initMenu();
	var m = location.href;
	$("a[href="+m+"]").parent().parent().parent().parent().show();
	$("a[href="+m+"]").parent().parent().show();
	$("a[href="+m+"]").css("font-weight","bold");
});

It will expand the relevant section, and also bold the section you are in! Boyah

I've got it set up there for a 3 level structure:

Home>Category>Child>Grandchild

If you want to go any further, so >Greatgrandchild, add this in at the top

Code: Select all

	$("a[href="+m+"]").parent().parent().parent().parent().parent().parent().show();

And it should show it all.

[CharlieFoxtrot]

I'm very impressed! Congratulations!

[Tony Barnes]

Aw shucks

Embarrassingly enough I did have have to get help on the jquery forum, turns out I'd bloody written part of it in PHP and not realised! lmao

[Tony Barnes]

Some more testing of this, a couple of niggles - if you go to a second page in a category it fails, and if you go down into a product it again closes. Will look into the logic, as should be solvable...

[Tony Barnes]

Ok, this took longer than hoped, but here we go:

Code: Select all

$(document).ready(function() {
	initMenu();

	var m = location.href;
	var n = m.substring(0,m.indexOf('?'));

	if (n.length < 5) {
	$("a[href="+m+"]").parent().parent().parent().parent().show();
	$("a[href="+m+"]").parent().parent().show();
	$("a[href="+m+"]").css("font-weight","bold");
	}
	else { 
	$("a[href="+n+"]").parent().parent().parent().parent().show();
	$("a[href="+n+"]").parent().parent().show();
	$("a[href="+n+"]").css("font-weight","bold");
	}

	var p = $('#ProductBreadcrumb li:last').prev().html();
	l = p.indexOf("=") + 2;
	r = p.indexOf(">") - 1;
	p = (p.substring(l, r));
	$("a[href="+p+"]").parent().parent().parent().parent().show();
	$("a[href="+p+"]").parent().parent().show();
	$("a[href="+p+"]").css("font-weight","bold");

});

This now works on categories with multiple pages, and also keeps the menu open on the product page. It currently highlights the category in the breadcrumb as well, but meh, I can live with that!!!