Accordion Menu R2

[steve91386]

I have 5.5.2 Vendor Edition and cannot for the life of me get this implemented. Can anyone verify that it will work with my version?

[Tony Barnes]

Should do..?? Afraid never used that version, but the way it initialises jquery, etc, should be the same throughout

[steve91386]

Anyone want to make some $ and install it for me??

[Tony Barnes]

Just copy/paste this into your footer and all should be good

Code: Select all

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

       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");

    });
</script>

[bart]

Hi,

I'm really liking this script, and nice and easy to implement with just adding the code into the footer. So thank you.

However i'd like to set it up so that the first of the <li> <ul> nestled lists always expanded.
Does anyone know how this could be done?

Thank you

[Tony Barnes]

Just realised I hadn't updated this so that it worked properly on /pages/ - use this guys

Code: Select all

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

	var m = location.href;
	var n = m.substring(0,m.indexOf('?'));
	var o = m.match("/pages/")
	if(o == null){
	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();
	if(p != null){
	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+"]").not('.Content a').css("font-weight","bold");
	};
	};
});

</script>

Bart - you'll want to add this in:

Code: Select all

$('#SideCategoryList ul ul:first').show();

So it looks like:

Code: Select all

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

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

	var m = location.href;
	var n = m.substring(0,m.indexOf('?'));
	var o = m.match("/pages/")
	if(o == null){
	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();
	if(p != null){
	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+"]").not('.Content a').css("font-weight","bold");
	};
	};
});

</script>

Will keep the list open regardless of what page you are on - not sure why you'd want to though?!?

[bart]

Hi Tony,

Thanks very much for that. It works excellently.

We sell body piercing jewellery and products are listed in a few different categories and we are experimenting with different ways of display menus. We want to constantly display the most popular jewellery type menu but then also have collapseable menus for jewellery material and jewellery location e.g. ear, lip, eyebrow...

bart

[Tony Barnes]

Ah right, I thought it might be something like that - I did set up quickly on my site to test, in honesty, it felt like it was broken rather than being a feature. Hopefully will feel different on yours!!

[bart]

I see what you mean about it feeling broken. Hopefully with some good styling i can get it looking ok, we'll see how it goes.

[Tony Barnes]

lol!

You can set the styling for that part to be different by using the jquery selectors and setting the css that way, could be quite effective?

So $('#SideCategoryList ul ul:first').css("your", "css", "here") kinda of thing