PDA

View Full Version : Free Accordion Menu R2


novista
08-10-2009, 04:38 PM
Here is a new version of the accordion menu. This one includes some advanced features to give you more options to manage the customer experience. In order to use the newer features of jquery and the accordion, it will be necessary to replace the jquery packaged with Interspire (1.2.6) with a newer version (1.3.2). I have not found any problems with the cart and this newer jquery.js. Interspire also hinted in another post that future releases will include an updated version of this file. No confirmation or date has been given.

With this accordion you have several controls to work with, the best way to understand these controls is to try them. A description of each is below.

Accordion Controls:
active: This is will allow you to have all categories collapsed by default. If you set this value to 0, then the first category is always expanded and the rest collapsed, set it to 1 and the second category is expanded etc. If you want all categories to be collapsed, then set the value to be 'false' in quotes.

autoHeight: This one is hard to explain in words so best to try it. If you set autoHeight to 'true', the space allocated to display the sub-categories is set to the maximum amount of space needed to display the category with the most sub-categories. If you set this to false, then the space the category panel takes up adjusts according to how many sub-categories you have.

event: This controls whether the menu expansion takes place on 'click' or 'mouseover'. Choose 'click' if you want the category expansion to happen through deliberate action by the customer. With 'mouseover' it is possible that the customer will expand and collapse the categories by inadvertently mousing-over a category. One important note: If you set this to click, customers will not be able to see any products assigned to the top level category (because click controls the accordion and will not take you to that category). Be sure that you have not products assigned to the top level category.

collapsible: By setting this variable to be 'true', click once to expand a category, click it again to collapse it. If you set this to 'false', click on an expanded category will do nothing. In other words, there will always be an expanded category until the customer goes to another page. Collapsible is inactive if your event is equal to 'mouseover'.

navigation: this is required for IE8 compatibility mode and should be set to 'true'

Installation:

Step 1
Download the following files and place them files in the /javascript folder. Because this forum does not permit attaching a js file, you will need to rename them from .txt to .js.
ui.accordion.js
ui.core.js
jquery-1.3.2.js

Step 2
Edit Panels/SideCategoryList.html and replace <ul> with <ul id="accordion">

Step 3
Edit Panels/HTMLHead.html. Find
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery.js"></script>

and replace it with

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery-1.3.2.js"></script>

Place the following code just before "</head>".

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/ui.core.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion({
active: false, // to have all categories collapsed on initial load, set to false
autoHeight: true, // sets subcat containers to be the same height as largest to prevent movement of any panels below it
event: 'click', // change to 'mouseover' if you want the expasion to take place on hover and make top category clickable
collapsible: true, // allow customer to collapse all sections - click on open section collapses it - for event = click only
navigation: true // require to support IE8 in compatibility mode
});
});
</script>

Step 4
From the Control Panel, Click on Settings --> Store Settings and choose the Display Settings tab. Make the Category List Depth setting = 2 or more

You can learn more about the jquery accordion here...http://jqueryui.com/demos/accordion/

EDIT - IMPORTANT: There was a problem reported with IE8 in compatibility mode where the accordion would not be activated. The category links still worked, just not using the accordion. To correct this problem, add navigation: true after the collapsible variable in the HTMLHead file. The code above was modified to reflect this change.

EDIT: Changed the original instructions for the active variable -- if you want the page to initially load with all categories to be closed, set the active variable to be 'false' (no quotes).

EDIT Jan 27, 2010: Tested accordion with ISC 5.5.2 and it worked fine. It is no longer necessary to download jquery-1.3.2.js in Step 1 or replace jquery.js with jquery-1.3.2.js as mentioned at the beginning of Step 3. The rest of Step 3 is required.

swingsetmall
08-10-2009, 06:35 PM
This is excellent Michael. Thank you for all your hard work.

mattnz
08-11-2009, 07:48 AM
Thanks for this. I was also able to get the same effect as this from your previous version, using 'click' instead 'mouseover'.

The only problem I am having is not being able to click on a category that doesn't any sub categories assigned to it. eg. all the categories have to have subcategories. Direct links from a category in the menu dont work. I wonder if there is a way to get around that.

Also anyone know of ways to allow for showing the subcategories of subcategories this way?

mattnz
08-11-2009, 10:12 AM
I have noticed a problem with this script, running it in IE 6 , it doesn't work, and displays the following Javascript error

line: 90
char: 4
Error: Expect identifier, string or number
Code: 0

Works fine in IE8, FIrefox, Safari and Chrome, but not in IE6. I don;t know about IE7

novista
08-11-2009, 02:33 PM
I'm not seeing any errors in IE. Can you post or PM me your accordion settings in panel.HTMLHead and a link to your site?

mattnz
08-12-2009, 04:55 AM
This is the header code below. I can't post the website , as this isn't assigned to it, due to it being a live site. It works fine in IE 8, but when you go into compatibility mode, it breaks. It also does the same thing in IE6. I have tried your old R1 menu in both IE 6 and compatibility mode, and it works fine, so I am not sure what is causing it to break.

<head>
<title>%%Page.WindowTitle%%</title>

<meta http-equiv="Content-Type" content="text/html; charset=%%GLOBAL_CharacterSet%%" />
<meta name="description" content="%%Page.MetaDescription%%" />
<meta name="keywords" content="%%Page.MetaKeywords%%" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="shortcut icon" href="%%GLOBAL_ShopPath%%/favicon.ico" />

<link href="%%GLOBAL_STYLE_PATH%%/%%GLOBAL_SiteColor%%.css" type="text/css" rel="stylesheet" />
<link href="%%GLOBAL_STYLE_PATH%%/styles.css" type="text/css" rel="stylesheet" />
<link href="%%GLOBAL_STYLE_PATH%%/iselector.css" type="text/css" rel="stylesheet" />



<!--[if IE]>
<link rel="stylesheet" type="text/css" href="%%GLOBAL_STYLE_PATH%%/ie.css" />
<![endif]-->

<!-- Tell the browsers about our RSS feeds -->
%%GLOBAL_HeadRSSLinks%%

<!-- Include visitor tracking code (if any) -->
%%GLOBAL_TrackingCode%%

%%GLOBAL_Stylesheets%%

%%GLOBAL_DesignModeStyleSheet%%

<!-- start removed 2009-08-11 --><!--<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery.js"></script>--><!-- end removed 2009-08-11 -->
<!-- start added 2009-08-11 -->
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery-1.3.2.js"></script><!-- end added 2009-08-11 -->
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/menudrop.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/common.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/iselector.js"></script>

<script type="text/javascript">
//<![CDATA[
config.ShopPath = '%%GLOBAL_ShopPath%%';
config.AppPath = '%%GLOBAL_AppPath%%';

// Ensure that all product lists are the same height
$(document).ready(function() {
if(typeof(DesignMode) != 'undefined') {
return;
}

function setHeight(ele) {
var maxHeight = 0;
$(ele).not('.List').each(function() {
if($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(ele).css('height', maxHeight);
}

setHeight('.Content .ProductList:not(.List) li .ProductDetails');
setHeight('.Content .ProductList:not(.List) li .ProductPriceRating');
setHeight('.Content .ProductList:not(.List) li');
});
//]]>
</script>

%%GLOBAL_QuickSearchJS%%

%%GLOBAL_RTLStyles%%
<!-- start added 2009-08-11 New Accordian Script-->
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/ui.core.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion({
active: 99, // to have all categories collapsed, set to be a number larger than the number of categories
autoHeight: false, // sets subcat containers to be the same height as largest to prevent movement of any panels below it
event: 'click', // change to 'mouseover' if you want the expasion to take place on hover and make top category clickable
collapsible: true, // allow customer to collapse all sections - click on open section collapses it - for event = click only
});
});
</script>
<!-- end added 2009-08-11 -->
</head>

novista
08-13-2009, 11:39 AM
mattnz,

Not sure if you got my PM but I found the issue with IE8 in compatibility mode. Add navigation: true to the accordion variables. That should solve the problem. Thanks for reporting this.

For everyone else, the HTMLHead code in the original post has been edited to show this change. There are no changes required to any of the jquery files.

mattnz
08-13-2009, 12:42 PM
Thanks, I didn't see you PM. Yes that all now works perfectly. Thanks for your help.

overdrive
08-13-2009, 04:20 PM
nicely done with this mod. I have been looking for something like this.

steve_mm
08-13-2009, 08:23 PM
... The only problem I am having is not being able to click on a category that doesn't any sub categories assigned to it. eg. all the categories have to have subcategories. Direct links from a category in the menu dont work. I wonder if there is a way to get around that.

Is this still a problem with the menu, or was it fixed with the IE8 navigation: true variable?

Just curious...

(I haven't yet gotten to playing with this menu script yet.)

Steve

wizard
08-14-2009, 03:47 PM
The old menu you could click on a category with no sub and it would show all
of the products. This one does not?

novista
08-14-2009, 04:08 PM
If you set the 'event' to be 'mouseover', then the top level category will be clickable and you can see products assigned to it. If you set 'event' to be 'click', then no, you will not be able to see products directly assigned to the top level category because the click event activates the accordion.

wizard
08-14-2009, 04:13 PM
If you set the 'event' to be 'mouseover', then the top level category will be clickable and you can see products assigned to it. If you set 'event' to be 'click', then no, you will not be able to see products directly assigned to the top level category because the click event activates the accordion.


-------------------------------

So I can't have my cake and eat it also :(

novista
08-14-2009, 04:28 PM
I'll add this to my ever-growing list. No promises but I will look into it next week.

wizard
08-14-2009, 04:33 PM
I'll add this to my ever-growing list. No promises but I will look into it next week.


----------------------------------

You Da Man :D

zibod
08-26-2009, 05:17 PM
Incredible...it's just working flawlessly....

novista
08-28-2009, 11:47 AM
If you set the 'event' to be 'mouseover', then the top level category will be clickable and you can see products assigned to it. If you set 'event' to be 'click', then no, you will not be able to see products directly assigned to the top level category because the click event activates the accordion.

-------------------------------

So I can't have my cake and eat it also

The question is, is it possible to make the top level category link 1) open a new category page and, 2) expand the accordion menu.

I don't see a way to do this. When you click on a category link, a new page is opened using the default state of the menue per your settings in the HTMLHead file. The state of the menu on the previous page is lost.

If I do find a way of accomplishing this, I'll post here.

mattnz
08-28-2009, 11:51 AM
The question is, is it possible to make the top level category link 1) open a new category page and, 2) expand the accordion menu.

I don't see a way to do this. When you click on a category link, a new page is opened using the default state of the menue per your settings in the HTMLHead file. The state of the menu on the previous page is lost.

If I do find a way of accomplishing this, I'll post here.

The only way to do it is to have an 'expand' icon (eg a + of > sign) next to the left of the main category menu. Which if you click on the icon, it expands the subcategories, but if you click on the parent category, it will go to that category.

HomeMediaPros
08-28-2009, 11:57 AM
I followed instructions and to the letter and it still does not work. I tried everything no luck. Any ideas www.shophomemedia.com

novista
08-28-2009, 03:19 PM
I took a copy of your home page and loaded it on my server. I then called my js files and it worked fine http://novistawebdemo.com/hm.html so it has something to do with the js files or the javascript folder. Check the permissions on the js files, at minimum they should be 664. I've not seen this before so I can't say exactly what is going on. If you want me to take a closer look, PM me.

HomeMediaPros
08-28-2009, 09:12 PM
Novista,

not only it is not working on my site, the search stopped working as well. I didnt make a backup of HTMLHead file. So I am dead in the watter. The only thing is taht I had R1 of menus in place before. But I did clean that code out.

Please help ....!!!!

novista
08-28-2009, 09:31 PM
What version of ISC are you using?

meules
09-15-2009, 12:00 AM
Hi,

I can install the menu but strange things are happening :eek: I´m running IE8 and ISC 5.0.6. First of all the menu doesn´t open a categorie without any subcategories. Second the header of my newsletterbox suddenly disappears and show up again when I click a category :confused:

I have read the whole thread and tried different things but still no luck.

Any help greatly appreciated.

novista
09-15-2009, 06:32 PM
If you have event set to 'click', then the main category link will only expand the menu, it will not open a category. I am looking in to a possible solution but no promises as to when it will be ready.

Can't say what is happening with your newsletter box but if you want to include a link to your page, I can take a look.

meules
09-16-2009, 10:43 AM
If you have event set to 'click', then the main category link will only expand the menu, it will not open a category. I am looking in to a possible solution but no promises as to when it will be ready.

Can't say what is happening with your newsletter box but if you want to include a link to your page, I can take a look.

Novista, you have a PM

novista
09-16-2009, 05:08 PM
I've replied, let's take this offline and not clutter the forum. If you still have a question, contact me directly -- michael [at] novistaweb [dot] com.

aussiemagnets
09-18-2009, 12:42 PM
Is there a way to make the accordion 'sticky'? i.e. once I open a particular subcategory, that subcategory stays open until I select another.

At the moment, when a customer selects a product from one of the categories in the accordion, the menu reverts back to the default category and closes the category the customer was browsing from. This really stagnates the browsing process and I can see it becoming intensely frustrating.

I imagine this might need to use cookies?

novista
09-18-2009, 02:04 PM
If you set Navigation to be true, when you click on a subcategory, the page should open keeping the menu same state. If you are not seeing this, can you tell me which browser you are using?

aussiemagnets
09-18-2009, 02:23 PM
If you set Navigation to be true, when you click on a subcategory, the page should open keeping the menu same state. If you are not seeing this, can you tell me which browser you are using?

The page does open keeping the same menu state, but only for categories. If I visit product pages then the menu resorts to the default open state (and hence the category you visited the product from is closed). As far as I know the navigation option will open the menu according to the current page URL, and it does this as expected, but it doesn't persist with keeping the same level open. (I think this is expected behaviour, but I'd like to improve it).

If it helps, I'm on Safari 4.0.3 and Firefox 3.5.2 on Mac.

I think the easiest way to achieve this would be to match location.href with the referring URL...?

(P.S. Great mod, thanks!:D)

novista
09-18-2009, 08:34 PM
Good catch, I never noticed that. I think you are right in that it will require a location.href or cookie. I can't take the time to look at it right now but others have asked for modifications as well. I should be able to take a closer look in a few weeks and will post here if I can resolve this and some of the other questions.

myshop
10-06-2009, 07:12 AM
Hi

I have found a problem with the shopping cart on sites that have the accordian menu enabled. It causes issues with the checkout and ultimatly stops clients from ordering in a certain situation.

Here is the lowdown.

If your an existing customer (signed in) on a site and you attempt to make a purchsase and proceed to the checkout and then choose the option: "I want to use a new billing address' radio button and then you fill in all the new address details when you click the 'Bill & Ship to this Address' button the page reloads back at the start of the ordering process rather than the ajax code running and the order going to step 3 like it should.

I would agree that this would be a fairly infrequent thing for a customer to do (specify an alternate address when ordering) but it did happen to a client of mine and I can confirm that by removing the accordian code the issue goes away.

Can someone confirm that they also have the same issue.

Note: I created an account on swingsetmall.com and tested the checkout - It appears to be OK. So perhaps the problem only occurs in v4 sites? (swingsetmall.com is v5)

aussiemagnets
10-06-2009, 07:53 AM
If your an existing customer (signed in) on a site and you attempt to make a purchsase and proceed to the checkout and then choose the option: "I want to use a new billing address' radio button and then you fill in all the new address details when you click the 'Bill & Ship to this Address' button the page reloads back at the start of the ordering process rather than the ajax code running and the order going to step 3 like it should.


I don't have the same issue, but I'm on 5.0.6.

Easiest fix would be to duplicate your HTMLHead Panel, name it HTMLHeadCheckout, remove the accordion code and then use HTMLHeadCheckout in all your checkout pages. I hope this makes sense?

EDIT: turns out you'll also have to duplicate /includes/display/HTMLHead.php and rename it HTMLHeadCheckout.php if you want to achieve this. There was a bug with our checkout and I thought removing the accordion might fix it, but it hasn't...

Of course, this won't be an option if you need to have the accordion in the checkout. (I've removed everything that doesn't need to be there for the checkout to reduce the risk that someone might click away...).

tonybarnes
10-12-2009, 04:35 PM
***Thanks to Painstik for this***

For those of you who haven't seen this, a lightweight bit of code has been done for the accordion. Just drop this into your Header.html file:

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').hover(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>

It doesn't have to call up the .js files, and more importantly can handle MULTIPLE levels. So no stopping at level 2 anymore :)

ptt81
10-12-2009, 07:36 PM
nevermind, it doesn't work with click because it loads the page and reset the navigation

myshop
10-12-2009, 11:17 PM
***Thanks to Painstik for this***

For those of you who haven't seen this, a lightweight bit of code has been done for the accordion. Just drop this into your Header.html file:

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').hover(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>

It doesn't have to call up the .js files, and more importantly can handle MULTIPLE levels. So no stopping at level 2 anymore :)

Hi

So does this need the new version of jquery still?

wurdz
10-13-2009, 03:50 AM
can you make it "On Click" instead of "on hover"?

tonybarnes
10-13-2009, 08:42 AM
Painstik did another version for clicking:

<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('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>

He originally had the first one set to click, but I swapped out to hover as it loaded the category, this one fixes that. I haven't checked this version as we've had the hover equivalent running for ages now, so don't want to confuse existing customers.

Yes, this uses jquery, but that is already pulled up for other things in ISC I believe.

myshop
10-15-2009, 01:09 AM
But does it need the later version of jquery? (i.e a later version than whats included with the cart?)

mattnz
10-15-2009, 03:10 AM
Painstik did another version for clicking:

<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('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>

He originally had the first one set to click, but I swapped out to hover as it loaded the category, this one fixes that. I haven't checked this version as we've had the hover equivalent running for ages now, so don't want to confuse existing customers.

Yes, this uses jquery, but that is already pulled up for other things in ISC I believe.

I don't know how you can use the 'hover' version, over the 'click' version. I first set it up as a hover menu, and people found it far too difficult to use, especially when you have got long submenus. It is fine if you navigate the menu by moving the mouse off the menu horizontally, to hide and display the submenus. But most people move their mouse vertically, which makes it impossible to use, especially ifyou are moving 'upwards' up the menu.

myshop
10-15-2009, 06:04 AM
I tried the new 'click' version in htmlhead but i got JS errors in IE:

lang is undefined

mattnz
10-15-2009, 06:14 AM
I tried the new 'click' version in htmlhead but i got JS errors in IE:

lang is undefined

Mine works fine, but you need to make sure that you are using the new JQuery script, and you are using the original instructions.

Anyone know if it is possible to keep the submenus open after you click on a submenu item, in the page that loads. The original code did this , but this new code doesn't. Ideally it would be good if it worked like this one http://smiggle.co.nz/SM_loadSelectedCatSection.process?RestartFlow=t&Section_Title=Tape#

myshop
10-15-2009, 06:26 AM
Thanks - fixed.

tonybarnes
10-20-2009, 09:18 AM
For anyone who has done the new variation - move the JS from Header.html to Footer.html as soon as you can.

Whilst in Header.html it knackers the account sign up form, and also lightbox for viewing the product images.

It works fine (as far as I can tell) running in Footer.html

mattnz
10-20-2009, 11:50 AM
For anyone who has done the new variation - move the JS from Header.html to Footer.html as soon as you can.

Whilst in Header.html it knackers the account sign up form, and also lightbox for viewing the product images.

It works fine (as far as I can tell) running in Footer.html

That doesn't occur for me, so it is probably isolated to just you?

tonybarnes
10-20-2009, 11:51 AM
Could be - but don't know why it would be. Worth a check for all though, as they are not 2 things that I do day to day on our site!

We're running 5.0.6 if that makes a difference

mattnz
10-20-2009, 11:57 AM
Could be - but don't know why it would be. Worth a check for all though, as they are not 2 things that I do day to day on our site!

We're running 5.0.6 if that makes a difference

I'm using the same version, using a customisation of the default template, and the customer login and lightbox images work fine. It is possibly the template that you are working form that is conflicting somewhere

tonybarnes
10-20-2009, 12:05 PM
Customised default template here too.

Server config? Dunno

myshop
10-21-2009, 11:44 AM
Mine seems OK to?

ckmer
11-19-2009, 12:44 PM
excellent work Michael

cinegearstore
11-25-2009, 07:43 PM
is there any way to adjust the space on categories that don't have as many sub-categories? they all drop down with space at the bottom to match my longest category list.

love this mod!

cinegearstore
11-25-2009, 07:48 PM
nevermind, i answered my own question by changing size from true to false like the original post said

Lipstickandlingerie
01-03-2010, 10:23 AM
Does anyone know if this or similar scripts can be used to get the same effect for a brands menu

novista
01-06-2010, 11:07 PM
If you set your autoHeight to be false, the space allocated to the sub categories will adjust accordingly.

0utcast
01-10-2010, 03:57 AM
thank you for this free menu. what a great free addon. would love to give a donation to you if allowed for a great post.

0utcast
01-10-2010, 06:01 AM
wondering if a person could make the menu expand a certain category when the page first loads.

right now when the page first loads the menu is closed up until you click a category.

novista
01-10-2010, 11:15 PM
Thanks for offering Outcast but not necessary. Happy to put it out there.

opposites
01-26-2010, 02:28 PM
we are currently running the original version of your accordion menu as we like the way you can click on the menu link and both load the page, as well as open the accordion.

has there been any development to this new accordion menu that would enable us to keep this functionality?

running the old version has not been a problem for us, until we upgraded our version of interspire to 5.5.2. Since the upgrade, if we put the link in HTML Head for the jquery.accordion.js file, it makes the design mode functionality disappear, I am not sure if this is something in the update causing this, or the javascript file. is anyone else experiencing this?

Any help with the old accordion or if you have a development for the new accordion to enable the click to open the page and accordion, would be great.

Excellent menu though, we've used this for a while on a few sites and its been great.

novista
01-26-2010, 05:11 PM
I've not had a chance to test it in 5.5x but will do so this week. What I have noticed is that Interspire has moved to a higher version of jquery.js so it may not be necessary to replace that code in the HTMLHead file and use the jquery file I attached in the original post.

I'll be back in a days on this.

novista
01-27-2010, 04:48 PM
Just ran a quick test of the accordion and 5.5.2 and it worked fine.

dave_finlayson
02-01-2010, 10:21 PM
Thanks for the menu, works perfectly (so far as I can see) in 5.5.2.

Was there any 'fix' for the menu closing on product pages? Whilst I love the menu I'm not sure if we can use it if it doesn't remember where it was when you click out of sections!

novista
02-03-2010, 02:13 PM
Thanks for the menu, works perfectly (so far as I can see) in 5.5.2.

Was there any 'fix' for the menu closing on product pages? Whilst I love the menu I'm not sure if we can use it if it doesn't remember where it was when you click out of sections!

Sorry, nothing that keeps the status of the menu.

latifbaih
02-07-2010, 06:57 AM
Great work Michael,

I've used your menu on 2 sites so far and I don't have any issue with any of them...

However with the new cart 5.5.2, the menu doesn't work... I thought the template, since it was one of the new ones. I tried it with the default template (blue theme) and still doesn't work... I have no idea what am I missing...

The display store settings were adjusted, did check the path...

I tried both ways, uploading the jquery1.3.2 and calling it and not even using the 1.3.2 and working with the latest jquery that comes with 5.5.2 as you mentioned...

Do I need to update the ui.core and ui.accordion files? I'm using the old ones that were in your earlier thread...

Please help!

ian@azendi.com
02-07-2010, 11:55 AM
Laitifbaih

When I upgraded to 5.52, I found that the Category List Depth on the settings>display page had reverted to 1. Setting it to 2 got the accordion menu working again.

latifbaih
02-07-2010, 11:18 PM
Thanks Ian,

I've adjusted the category list depth to more than one, I had it first as 10 and I used number 2 as I thought it could be the magic number but no luck...

novista
02-09-2010, 12:29 AM
latifbaih,

Just tested again using 5.5.2 with the default template and it seems to work ok. If you want to post or PM me with your URL, I can see if there is anything obvious.

latifbaih
02-09-2010, 04:05 AM
I've sent your a private message...

cupargarden
02-09-2010, 11:03 AM
This would be the perfect solution if it could be adapted, like Dave said, to show the 'history' - so if you only want to show a category list depth of 2, when you go through the sub-sections, the top section is still expanded throughout, as long as you are in that section or its child.

I would consider this as paid work - if it is a job you are able and willing to take on, please PM me :)

Mykatt
03-23-2010, 01:06 AM
This would be the perfect solution if it could be adapted, like Dave said, to show the 'history' - so if you only want to show a category list depth of 2, when you go through the sub-sections, the top section is still expanded throughout, as long as you are in that section or its child.

I would consider this as paid work - if it is a job you are able and willing to take on, please PM me :)

Just delving into the topics of category listing right now, but found this info on Accordion behaviour - might be useful to adapt the mod to remember location info.

#
navigation

Type:
Boolean
Default:
false

If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.
Code examples

Initialize a accordion with the navigation option specified.

$( ".selector" ).accordion( { navigation: true } );

Get or set the navigation option, after init.

//getter
var navigation = $( ".selector" ).accordion( "option", "navigation" );
//setter
$( ".selector" ).accordion( "option", "navigation", true );

mattnz
03-23-2010, 03:50 AM
This would be the perfect solution if it could be adapted, like Dave said, to show the 'history' - so if you only want to show a category list depth of 2, when you go through the sub-sections, the top section is still expanded throughout, as long as you are in that section or its child.

I would consider this as paid work - if it is a job you are able and willing to take on, please PM me :)

I agree, but I think it should be a standard feature of the cart out of the box, as the current standard menu system isn't good, where it just displays a huge list.
It should work in the same way to this website www dot babystar dot co dot nz
Most shops I have seen do this as standard anyway.

mattnz
04-06-2010, 03:06 AM
This would be the perfect solution if it could be adapted, like Dave said, to show the 'history' - so if you only want to show a category list depth of 2, when you go through the sub-sections, the top section is still expanded throughout, as long as you are in that section or its child.

I would consider this as paid work - if it is a job you are able and willing to take on, please PM me :)

The old version actually used to do this. The downside was that it only displayed two levels. There must be a way to put this into the new version.

cinegearstore
04-06-2010, 03:39 AM
I completely agree with mattnz. How could this not be built into this cart already. I have a ton of categories and it's just getting out of hand. Interspire needs to address this ASAP.

cinegearstore
04-06-2010, 03:43 AM
While I love this mod, there are issues. I have 3 levels set right now and it is automatically expanding the 3rd level. Anyone else have this problem???

mattnz
04-06-2010, 04:02 AM
While I love this mod, there are issues. I have 3 levels set right now and it is automatically expanding the 3rd level. Anyone else have this problem???

The old version did that, but the new version doesn't.

deltapage
04-11-2010, 09:54 AM
This is really good

steve_mm
05-05-2010, 10:53 PM
After upgrading from ISC 5.0.6 to 5.5.4, the menu's accordion expand / collapse isn't working properly for us. Sometimes when a page loads it will be all expanded with subcategory links showing; if I hit Shift / Refresh it will load all collapsed... but then when you navigate to a different page it will be all expanded again... or sometimes just the active category will be expanded. There seems to be no consistency to it.

(ISC 5.5.4 has changed the javascript references a bit from the previous version; now looks like this:

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/jquery.js?%%GLOBAL_JSCacheToken%%"></script>

The menu system wasn't working properly at all, so I stripped out the "JSCacheToken" bit; then it sorta worked (as stated above). I'm using the jquery-1.3.2.js reference now; tried switching it back to jquery.js, but that made no difference. Still had the same problem.

Has anyone else had this problem with the accordion menu and ISC 5.5.4? Any suggestions, Michael (Novista)?

Steve

smilelabs1
05-21-2010, 07:19 PM
Yeah, when I set this up the category is fully expanded on page load - nothing's hidden...

We're in 5.5.4 also.

wizard
05-21-2010, 07:23 PM
Male sure you change it from one to 2 or 3 in the display settings.

http://biglens.biz
http://multimedia100.com

Ciao ;)

novista
05-21-2010, 07:46 PM
Hey folks, I just ran another quick test on a 5.5.4 store and it is working ok...http://dev.novistaweb.com/isc554/index.php

As Wizard said, make sure your category list is set to 2 or 3. Also, in a post buried in this thread somewhere, I mentioned that it is not necessary to copy or call the jquery-1.3.2.js as the new version of ISC uses a more recent jquery library. If you are still having problems, post or PM me with your URL and I'll take a look.

smilelabs1
05-21-2010, 07:46 PM
Thanks for the reply!

It was already set to 16 and I changed it to 2 to see if it would work.

No difference either way though...

smilelabs1
05-21-2010, 07:47 PM
Hi Novista - just sent you an email with the details of our situation.

Thanks!

smilelabs1
05-26-2010, 07:51 PM
Is there a way for the accordion to expand to show the products in each category instead of sub-categories?

Thanks

vickyh
06-07-2010, 04:44 PM
This menu is great - many thanks for creating it.

I noticed however that everytime I move to a new page, the menu fully expands and then contracts again. Is there anyway to stop that happening?

Thanks

BA Creative
07-14-2010, 08:52 AM
Just wanted to say a big thanks for this Michael.

This is the second time you've come to my aid with ISC - you're a legend!

Is there any news on an update that will keep the category expanded when viewing a product?

Cheers

purebluecreative
07-23-2010, 11:55 AM
Not sure if this has been covered but i cant find the definative answer...

We have the menu installed and its all working well. When we expand the menu and select a 2nd level category the menu remains expanded, however when we expand a 3rd level category and select it, the category page is loaded but the menu closes.

Our site is: www.love-jewellery.net and clicking on any of the 3rd level menus under 'Childrens' will show the problem.

Any help would be much appreciated.

steve_mm
08-20-2010, 07:17 PM
I'm still wondering if this menu has been updated at all in recent months (or plans to update it), specifically in regard to problems with it not expanding and collapsing properly when using ISC 5.5.4. (See my previous post in this thread (http://www.interspire.com/forum/showpost.php?p=65958&postcount=75) on this, as well as others reporting similar problems).

Also wondering if there are plans to update it, if necessary, to ensure it works properly with ISC version 6 when (IF?) it comes out?

(We reverted back to ISC 5.0.6 because of so many bugs with version 5.5.4, so for now the menu works with our older ISC version.)

Michael (Novista), do you have any status update for us?

Steve

novista
08-20-2010, 08:23 PM
Steve,

The accordion script was put out by the good folks at jquery. It is their code that makes the accordion work on ISC and thousands of other sites.

http://jqueryui.com/home
http://jqueryui.com/demos/accordion/

What I did was figure out how to implement it into Interspire. Javascript is not my forte so although I have played around with it, getting it to work a little more smoothly is not something I was able to do. I have gotten it to work properly with 5.5.4 so I am not sure why you had problems. It usually has to do with interference from other jscripts.

When ISC 6 comes out, I will give it a test to make sure it is working properly.

steve_mm
08-20-2010, 08:31 PM
OK, thanks for the clarification. I couldn't figure out the problem it had with 5.5.4... There was no new javascript added to our site when we updated, other than something that might have been packaged with ISC 5.5.4. So that was puzzling.

When / if ISC is released, and IF it's actually worth upgrading to (beating a dead horse here, but I'm skeptical ;-) then we'll see how this works.

Thanks for offering to check your version of the menu for compatibility. We appreciate it!

Steve

mattnz
08-21-2010, 12:22 PM
OK, thanks for the clarification. I couldn't figure out the problem it had with 5.5.4... There was no new javascript added to our site when we updated, other than something that might have been packaged with ISC 5.5.4. So that was puzzling.

When / if ISC is released, and IF it's actually worth upgrading to (beating a dead horse here, but I'm skeptical ;-) then we'll see how this works.

Thanks for offering to check your version of the menu for compatibility. We appreciate it!

Steve

This sort of feature should be in ISC by default. Not nessessarily in the animated sliding form. However ISC should only show the subcategory menus for the section you are in, rather than all the subcategoroes of all parent categories at one time. Most other shop I have seen does this, but not the ISC shop for some reason.

tonybarnes
09-08-2010, 11:22 AM
Right, for those of you who are using the jquery accordion script, I've sorted a way of getting it to stay open on categories

Change your document ready function to this:

$(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, sorted :D

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

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

And it should show it all. If you want to go deeper (!), just add in another line, with .parent().parent() added in

tonybarnes
09-08-2010, 05:16 PM
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...

mattnz
09-09-2010, 06:51 AM
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...

Thanks for all your development on this. I just wish that this sort of thing was inbuilt into the cart, so you can easily see where you are in the cart, and easily get to other subcategories within a category with just one click. It doesn't actually need to be an animated jquery script either. This lack of feature is one of the biggest weaknesses of this particualr shopping cart system.

tonybarnes
09-09-2010, 10:42 AM
No worries Matt - it's something that has been bugging me for a while.

Ok, this took longer than hoped (I do so hate javascript...), but here we go:

$(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 pages. It currently highlights the category in the breadcrumb as well, but meh, I can live with that!!! (could always just set them all to bold via CSS, or play with the specificity a little)

pagreen07
09-12-2010, 11:39 AM
I REALLY like where this thread is going...but it's still not working for me. I currently have this:

<script type="text/javascript">
$(document).ready(function(){

$("#accordion").accordion({

active: false, // to have all categories collapsed on initial load, set to false
autoHeight: false, // sets subcat containers to be the same height as largest to prevent movement of any panels below it
alwaysOpen: false,
event: 'click', // change to 'mouseover' if you want the expasion to take place on hover and make top category clickable
collapsible: true, // allow customer to collapse all sections - click on open section collapses it - for event = click only
navigation: true // require to support IE8 in compatibility mode
});
});

</script>

And the new code doesn't include those settings so my entire menu remains open?

tomRiordan
09-15-2010, 05:33 AM
Right, for those of you who are using the jquery accordion script, I've sorted a way of getting it to stay open on categories...

Danke, I had made my own script for this, but couldn't work out how to keep them open, this solved it fine!

olaand
09-15-2010, 12:19 PM
hi tonybarnes, I looked at your web site and the menu is behaving really well. Looks great. I tried to implement your recent addition but I think I must have missed something out because its not doing it.

I now have:

<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/ui.core.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/ui.accordion.js"></script>
<script type="text/javascript">
$(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");
});
$("#accordion").accordion({
active: false, // to have all categories collapsed on initial load, set to false
autoHeight: false, // sets subcat containers to be the same height as largest to prevent movement of any panels below it
event: 'click', // change to 'mouseover' if you want the expasion to take place on hover and make top category clickable
collapsible: true, // allow customer to collapse all sections - click on open section collapses it - for event = click only
navigation: true // require to support IE8 in compatibility mode
});

</script>

I looked at the source file of your home page and you don't seem to have the accordion bit?

tommyD
09-15-2010, 03:54 PM
Nice but not there yet. Users need to know visually which cats have multiple categories before rollover happens. Simple triangles would be a good visual identifier to start with.

I'd like to add code mods but I'm slammed right now...

T

andreir
09-16-2010, 12:14 PM
I've tested on my testing server and here is what I found:

With Search Engine Friendly URLs disabled the menu works perfect.
However, when I enable the Search Engine Friendly URLs the menu is closing when I go to page two and when I go to product page.

Unfortionaly my java script knowledge is really zero so I can't help in solving this problem.

If anybody can find the solution, it will be great

tonybarnes
09-23-2010, 08:26 AM
Ooland, this is what we've got in the footer, works for us. It uses the jquery instruction set, rather than the accordion plugin :)

<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>


Andreir - so with SEO friendly OFF, the above works, but when ON, it doesn't? If so, I'm baffled, as I coded it specifically for SEO friendly URLs?!?

olaand
09-24-2010, 12:11 PM
tonybarnes ! It works a treat. Thank you for this little addition. Not only does it work great, it doesn't interfere with the script for my slideshow. Much neater than the "old" accordion menu :)

tonybarnes
09-24-2010, 12:32 PM
Hah, glad you like, we're certainly happy with it!

myshop
09-25-2010, 07:26 AM
Hah, glad you like, we're certainly happy with it!

It doesnt work real well when you click on your Health Care Category. :-(

tonybarnes
09-27-2010, 08:51 AM
We don't have a health care category - do you mean 'household care'? How is it not working, all seems fine this end?

mattnz
09-27-2010, 08:54 AM
We don't have a health care category - do you mean 'household care'? How is it not working, all seems fine this end?

Its great to see it working, with the sub categories remaining open. Are you using version 6?

tonybarnes
09-27-2010, 09:08 AM
We're on 5.5.2 - but given the way this works, I don't see an issue with 6 as it's just a javascript effect on the normal layout

myshop
09-27-2010, 09:31 AM
We don't have a health care category - do you mean 'household care'? How is it not working, all seems fine this end?

Sorry, household care - Yes.. in FireFox when you click it, it expands and contracts... immediatly.

tonybarnes
09-27-2010, 09:52 AM
There isn't a 2nd level in household care, just the 1, so no expanding to be done :)

zibod
09-27-2010, 10:01 AM
Ooland, this is what we've got in the footer, works for us. It uses the jquery instruction set, rather than the accordion plugin :)

your coding works really well at our side. Thank You. Using 6.0.14 BTW...

tonybarnes
09-27-2010, 10:23 AM
Ah, good, so 6.x compatible :)

zibod
09-27-2010, 10:26 AM
Ah, good, so 6.x compatible :)
Funny enough...it was fool proof. So, a simple copy and paste will work out of box

tonybarnes
09-27-2010, 10:30 AM
Nicely

[blah, blah, blah, is my post over 10 letters long now?!?!? Sheesh, the amount of spam that ends up on here, and real people can't put up small posts....]

tonybarnes
09-27-2010, 12:07 PM
Just as an FYI, if your category contains an unusual character, e.g. &, then things aren't working right in Safari, trying to find out why now. Basically if you're clicking through via category it doesn't stay open, but when you get to product level, it does.

I've also made a small tweak to the last line, so that on the product page it doesn't highlight the category in the product breadcrumb, as though it didn't bother me at first, it is annoying me now, lol!

<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+"]").not('.Content a').css("font-weight","bold");

});

</script>

myshop
09-27-2010, 12:28 PM
There isn't a 2nd level in household care, just the 1, so no expanding to be done :)

Ahh. ok, in FF the full length category list displays for a second and then collapses.. looks a little strange.

tonybarnes
09-27-2010, 12:57 PM
Yeah, the javascript fires after the page has loaded, so the menu will be open, then collapse - not sure if other way around is massively feasible? Guess you'd have to start with all the UL's as display:none, and then open them out the other way.

It does look strange, but you get to see the menu items flash by! lol :)

zibod
09-27-2010, 01:03 PM
Just as an FYI, if your category contains an unusual character, e.g. &, then things aren't working right in Safari, trying to find out why now. Basically if you're clicking through via category it doesn't stay open, but when you get to product level, it does.

I've also made a small tweak to the last line, so that on the product page it doesn't highlight the category in the product breadcrumb, as though it didn't bother me at first, it is annoying me now, lol!


Thank You again.
Why not make a new thread out of this tweak? This is cleaner and for sure doesnt requier additional js installed. :)

a1m
09-27-2010, 01:36 PM
Yeah, the javascript fires after the page has loaded, so the menu will be open, then collapse - not sure if other way around is massively feasible? Guess you'd have to start with all the UL's as display:none, and then open them out the other way.

It does look strange, but you get to see the menu items flash by! lol :)

Hey Tony,

Although I haven't implemented this mod but I was thinking the same exact thing.

Why not setup a div to hide the entire menu and after the jquery has kicked in change the display.

I currently use this javascript function to accomplish something like that.


function showhide(layer_ref) {
if (document.getElementById) {
hza = document.getElementById(layer_ref);
hza.style.display = "block";
//hza.style.display = (hza.style.display=='block')?'none':'block';
}
return false;
}


To use it just have it say showhide('menudiv');

If you do implement this method and if it works, you will have to use the jquery's built in focus for the menudiv. Some browsers scroll all the way to the bottom of the page when executing the showhide code.

tonybarnes
09-27-2010, 02:06 PM
Righty, had a look at this and found it was a brilliantly simple fix - chuck this into your styles.css:

.Left #SideCategoryList li ul {
display: none;
}

So when the page loads, it will only load the top level navigation, then the JS fires up when everything is there, and the category level navigation opens up :D

Zibod - may as well leave it as it for now, others contributed before I did, so the current solution is a result of this thread :)

zibod
09-29-2010, 04:40 PM
Hi Tony,
I just noticed that the script interferes my facebox (http://chriswanstrath.com/facebox/)function. After adding the script, my facebox doesnt work anymore.
A little help maybe?

tonybarnes
09-29-2010, 04:48 PM
Do you have URL I can look at? Looking at the facebox page, it seems to be very similar to fancybox - but the way it is called seems to be unique enough?

zibod
09-29-2010, 05:28 PM
@tony: Check ur PM on the URL

tonybarnes
09-30-2010, 05:36 PM
Off bug hunting again, didn't put in a check for if one of the variables was null, which it will be on the category view when doing the product URL check.. duh!

New version!

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

So just putting in a null check on the p variable

zibod
09-30-2010, 06:11 PM
Off bug hunting again, didn't put in a check for if one of the variables was null, which it will be on the category view when doing the product URL check.. duh!

New version!

So just putting in a null check on the p variable
Works with facebox now. Thank You very much!

olaand
09-30-2010, 07:02 PM
Hi Tony - I know this probably goes against the logic a bit and we could achieve it by inserting another layer of top categories but do you think there is a way of opening the toplevel category page at the same time as expanding the menu? e.g. when you click on Daniel Smith Products on this site www.premiumartbrands.com (http://www.premiumartbrands.com) you expand the menu but you can't get to the top level category page unless you click on the breadcrumb when you are on a subcategory page.....:)

tonybarnes
10-01-2010, 09:12 AM
Nice one Zibod, glad that sorted it!

olaand - yep, that sounds odd, but as you have category level descriptions, I understand. Use this:

***other people probably won't want to/shouldn't use this***

<script type="text/javascript">
function initMenu() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
var checkElement = $(this).next();
var precheckElement = $(this).parent().parent().parent();
if(precheckElement.is('div')) {
}
else 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+"]").next().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="+m+"]").next().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>

That was actually the v2 - I did a simpler version, tested, and it was fine, however I then noticed on your site you have 3 levels of categories showing, which it didn't work for properly... lucky for you I'm keen on improving my jQuery/javascript at the minute!!!

If anyone wants to use this version, it works this way:

1. If top menu item is clicked, page reloads to top menu category, and expands menu
2. If sub menu, or sub-sub menu item is clicked, menu expands to allow browsing

olaand
10-01-2010, 09:25 AM
you are a star tbarnes :D . After this I would feel embarrassed to ask you anything else so I'll wait a day or two ;) I will try this at once

/ola

tonybarnes
10-01-2010, 09:48 AM
Let me know how you get on, should be bombproof, but always worth confirming!

olaand
10-01-2010, 09:57 AM
yes it works fine - its implemented -www.premiumartbrands.com - especially important to keep the accordion effect for the Unison Colour category since the 3rd level has 20 or so sub categories. Thank you very much tonybarnes. hope I can help you with something in the future....

tonybarnes
10-01-2010, 10:12 AM
Great, looks to be working well :)

zibod
10-02-2010, 03:29 AM
@olaand: how do you make the underline on the categories that we choose?

Tq

olaand
10-02-2010, 11:54 AM
Hi zibod - it is using the css class called ".Left #SideCategoryList li ul" and I apply a top border as follows

{

border-top-width: 2px;

border-top-style: solid;

border-top-color: #8f96a0;

}

Its not really the best way of doing it - it would be better to use a class for "active ul li" but I haven't had time to do that yet.

Because of the way I am doing it here it only underlines the category or sub category above the selected one. e.g. if you look at the 3rd level of Unison colour on the www.premiumartbrands.com web site you will see that 3rd level isn't underlined when selected, nor is the second level under Daniel Smith. In other words the bottom/lowest category isn't underlined.

The site is based on the diamondrings template but I think the .Left #SideCategoryList li ul class is present in most templates. For me it was around row 433.

Hope that helps,

Ola

zibod
10-02-2010, 12:04 PM
@olaland: very nice!! It works for me. Thank You!

tonybarnes
10-05-2010, 01:13 PM
Noticed another little bug - pages menus were being left open, bah! Added in some logic to check if you are on a page, if so, not to fire

<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>

zibod
10-07-2010, 06:08 AM
Dear Tony,
I found one bug where a category wont open up. Please see http://www.alatselam.com/Clipboard03.gif
Olight should contain items. However, when I click, it only expends the 'accessories'. It wont open items contained in Olight.

Meanwhile, you can open the website at the one I pm'd you a while ago :). Thanks much!

Turki
10-07-2010, 08:19 AM
Dear Tony,
I found one bug where a category wont open up. Please see http://www.alatselam.com/Clipboard03.gif
Olight should contain items. However, when I click, it only expends the 'accessories'. It wont open items contained in Olight.

Meanwhile, you can open the website at the one I pm'd you a while ago :). Thanks much!

You have to add products to last category only.
Or you have to change category level to be 2 in Admin CP > Settings > Store Settings > Display > Category List Depth: 2

tonybarnes
10-07-2010, 09:09 AM
This seems sorted now - just checked in both IE & FF, opens fine - was it because you didn't have enough category depth in the control panel?

zibod
10-08-2010, 08:32 AM
You have to add products to last category only.
Or you have to change category level to be 2 in Admin CP > Settings > Store Settings > Display > Category List Depth: 2
You are correct. This does it...Thank You

This seems sorted now - just checked in both IE & FF, opens fine - was it because you didn't have enough category depth in the control panel?
After following Turki's recommendation, the product would show up again. I think I mistakenly guided on how the menu works. Anyhow, everything is fine now. Than You

tonybarnes
10-08-2010, 09:05 AM
Ok, nicely :)

tonybarnes
10-15-2010, 09:24 AM
I've cleaned up the javascript a little on this, as it was bugging me that it was splitting things out into a seperate function, and I had a lot of repetition in the category/product/page logic. I also changed the slidetoggle speed to 400, as it's a bit less vicious. You can also change it to - toggle - which animates it a little more, but felt OTT for my liking.

<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var o = m.match("/pages/")
if(o == null){
if (n.length < 5) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p != null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
};
});

</script>

zibod
10-16-2010, 09:41 AM
Thank You Tony...it still works with facebox...

tonybarnes
10-16-2010, 06:20 PM
Great stuff :)

Turki
10-16-2010, 08:40 PM
Tony you should change this:

var o = m.match("/pages/")
if(o == null) {


to

var o = m.match("/pages/")
var g = m.match("/giftcertificates.php")
var w = m.match("/wishlist.php")
if((o == null) & (g == null) & (w == null)){


because without this change there will bugs in wishlist.php and giftcertificates.php?action=balance

Turki
10-16-2010, 09:15 PM
Or you can change it to:

var o = m.match("/products/")
var g = m.match("/categories/")
if((o != null) || (g != null)){
:)

tonybarnes
10-17-2010, 06:29 PM
Good thinking - we don't use those, so don't have that problem.

Hmmm, in fact, I'll switch the logic around - check if the URL is a category or product one, and if it is, do the menu expansion, etc. That way if anyone has any other pages/subfolders/etc it won't break. Will update in morning :)

tonybarnes
10-18-2010, 02:13 PM
Doh, didn't see the post above my one, yes, that is exactly what I have done!

Sorry for slowness, our server has been down all day :(

<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
}
});

</script>

Seems to work happily enough, and now should only fire on product or category pages - i.e. when someone is in a view where an extended menu makes sense

myshop
10-18-2010, 11:16 PM
Thanks Tonybarnes... This mod works great and best of all its easy to implement.

wezers73
10-21-2010, 05:06 PM
Doh, didn't see the post above my one, yes, that is exactly what I have done!

Sorry for slowness, our server has been down all day :(

<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
}
});

</script>

Seems to work happily enough, and now should only fire on product or category pages - i.e. when someone is in a view where an extended menu makes sense

hi, many thanks,just going to install this on v6, this may be a silly question but can you tell me if this is the only bit of script i need, this thread is huge and full of all sorts of things!

thanks
wes

tonybarnes
10-22-2010, 08:06 AM
Yes, just drop that at bottom of your HTMLhead.html, or footer.html and it should fire up

edrishti
02-02-2011, 08:33 AM
hi

we have used this thread to work on accordion menu

http://www.interspire.com/forum/showthread.php?t=14057

we have added the 3.js code fuction with script and added an <ul id="accordion"> in panel/sidecategorylist.html

but we cant manage to show the accordion style , it seems its showing the default js file

drop down menu in this site http://thechiproom.actionmarketingsolutions.net/

please help

tonybarnes
02-02-2011, 09:56 AM
At a glance your site is running the pop-out menus, this won't work at the same time anyway

novista
02-02-2011, 05:18 PM
You've also got 2 occurances of jquery. Take out jquery-1.3.2.js.

edrishti
02-04-2011, 09:06 AM
hi thanks for reply

we have removed the pop out menu and now accordion menu seems work but not perfectly as subcategory menu is visible and accordion menu works in category menu -

we have 5 categories but here its showing only 3 and when click on poker chips its open another category as like accordion menu

so it means sub cat which is now visible should hide and work like category accordion menu

please help

tonybarnes
02-04-2011, 09:21 AM
You're using the first method outlined in this thread, right?

I'm not sure if it does more than a couple of levels, you can use the other one that we put together in here. You don't need to call any .js files, just add this into your htmlhead.html (or footer, header, etc)

<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
}
});

</script>

That will set up the accordion, hold it open on the correct category when browsing, and also highlight the category by making it bold.

edrishti
02-04-2011, 09:39 AM
thanks for the fast response - but we did this process also and its not working at all

tonybarnes
02-04-2011, 09:53 AM
You're loading - http://thechiproom.actionmarketingsolutions.net/javascript/menudrop.js - before jquery, and but it has a jquery event in it, which is throwing an error. Load jquery first and see if that stops things breaking.

You also have a config errors that is happening before the accordion function that I've listed:

<script type="text/javascript">
//<![CDATA[
config.ShopPath = 'http://thechiproom.actionmarketingsolutions.net';
config.AppPath = '';
var ThumbImageWidth = 220;
var ThumbImageHeight = 120;
//]]>
</script>

Something not happy in there, could be a template issue? Again, try moving the accordion code above that to see if its breaking the js.

edrishti
02-04-2011, 10:07 AM
we tried its seems working but no accordion and sub cat menu is still visible - can you please let us know what to do ?

edrishti
02-04-2011, 10:08 AM
Do we need to make any changes in css

tonybarnes
02-04-2011, 10:22 AM
You've moved the function too far up, it is above your jquery source

edrishti
02-04-2011, 10:32 AM
wow it worked thanks a lot

As the problem- we were doing as clicking on row as where category but its working when we click on text

Can we make it these possible if we click on icon or full row then it will slide

tonybarnes
02-04-2011, 11:15 AM
I've just had a reasonably detailed look at howyou've got things set up, you're going to have to make some changes if you're wanting this to work how you're hoping. Your background image/li height is causing issues - the <ul>'s are therefore dropping down in a 'funny' place. Setting your left li's to min-height of 38px, instead of height 38px, deals with it to a small extent, but its not going to be ideal without re-working a reasonable amount I don't think

edrishti
02-25-2011, 04:34 PM
hi tony

coming back again - we did managed to style the whole accordion menu , just need a favour as when menu expands it should show the sign of "-" instead of plus image ( we tried to add in css but not able to manage as where need to add or add in java script ) - and i need menu to be expand automatically first time as a extra option

Finally we are getting java script error in all version of ie

Error #1:

Line: 3
Char: 1
Error: Object expected Error #2:

Line: 400
Char: 3
Error: Object expected Error #3:

Line: 92
Char: 5
Error: ‘config’ is null or not an object

please help

tonybarnes
02-28-2011, 09:11 AM
You'd want to swap the background image out with the click function. I'm a bit backed up at the minute, but have a read here - http://api.jquery.com/toggleClass/ - and you should be able to get it to work.

Basically you'll need to add a class to the sidecategorylist li that has the background image (so remove this from the id), then another which has the new image - call it 'opened' - then set the class toggle into the top part of the script:

$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
$(this).toggleClass('opened');
return false;
}
}
);


Should work fine

edrishti
02-28-2011, 11:53 AM
very very thanks - it worked perfectly -

can we have the option to use in css to show plus sign (+) image only where we have sub category and not in all menu where the sub categories is not there

*** i want separate image in menu where there is no sub category

and can we get rid of IE error

tonybarnes
02-28-2011, 12:09 PM
Ok, for that I'd actually go about things the other way round (!) so that all of the menus start with a '-' symbol, and only the ones that have subcategories would be swapped for a '+' symbol.

You could use the .each() function in jquery - http://api.jquery.com/each/ - so you'd need to do the logic check if there are li's under the existing li, and if so, do a toggle.

The errors look to be coming up because you are calling jquery after you are calling other scripts that will use jquery - move the jquery load further up in you htmlhead

phpini
04-15-2011, 04:34 PM
Is this script compatible with ISC 6.x?

No <ul> tag on Panels/SideCategoryList.html

Ryan@O'Neal
05-06-2011, 04:25 PM
First off - great job with that bit of code, it works just as promised.

Now, to my question... Was there a version of this where you clicked the Parent Category, was sent to that Category Page, and then the sub-categories for that Parent showed?

I'm looking at your code right now and think I may have a COMPLICATED way to do it (I'm not that great with JS sometimes), but I just wanted to see if maybe something was already done for that.

Thanks for your help, good work!

Ryan@O'Neal
05-09-2011, 04:24 PM
I just realized the activity in this thread is 3 months old, hopefully one of you is still around. I'm looking for the ISC friendly code to achieve what I stated above - I'm afraid to break the cart ;)

tonybarnes
05-09-2011, 04:47 PM
Try this:

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

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+"]").next().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="+m+"]").next().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>

Its a combination of a couple of options that came up in here.

Ryan@O'Neal
05-09-2011, 05:04 PM
Try this:

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

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+"]").next().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="+m+"]").next().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>

Its a combination of a couple of options that came up in here.

Wow, I was nowhere close in simplicity haha... Thank you so much for your help - I really appreciate your work here.

I can do XHTML+CSS+PHP, but oddly... JS just plain defeats me most days...

tonybarnes
05-10-2011, 08:55 AM
No worries. As it happens, I tried to simplify this version a bit yesterday, but for some annoying ass couldn't get it to work once simplified, so you're not alone in your defeat, lol!

pagreen07
05-22-2011, 04:32 PM
so, i stumbled over this lovely piece of code while I'm trying to build out this store:

http://toystore.mybigcommerce.com/categories/Toys/Shop-by-Age/1-to-3-Years/

I have some hard-coded drop-downs that are pulling in the 'display:block;' style from the side menu (which works great).

I'm not a javascript person by any means - is there a way to NOT make it affect the drop down I have going on there?

pagreen07
05-22-2011, 11:38 PM
the accordion doesn't seem to work on ie7...?

tonybarnes
05-24-2011, 04:46 PM
You will need to change these bits:

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


You want it to not open them up if they are in the 'nav' section. This will need something like this:


$("a[href="+q+"]").not('.nav a').parent().parent().parent().parent().show();
$("a[href="+q+"]").not('.nav a').parent().parent().show();


I think that will fire in, worth a shot :)

With regards to IE7, it should work fine?

pagreen07
05-24-2011, 04:53 PM
That worked - thank you so much :)

No, the accordion doesn't appear to be working for me in IE7. That being said - I'm on a Mac and running it on Parallels inside 'IETester' so that may have something to do with it. can you see it working in IE on your computer?

tonybarnes
05-24-2011, 05:23 PM
No worries

As for the IE problem, you're correct, its not working on IE8, so presumably IE7 will be the same. However (!) it should work just fine - I've just re-checked our site, and all gravy.

A quick glance at your site and it seems that IE7 is throwing up javscript problems - line 84 and 166 aren't happy in IE. The first one is actually in the jquery code (never good, lol!), and the second one is a problem with some code that has been added in, with the nth:selector - that may not work in the version of jquery you're running?

Other browsers seem to be more forgiving over this kind of stuff for some reason

akparade
07-13-2011, 04:29 PM
Hey guys. Firstly, Tony... great coding. Loving it.

Is it possible to:

A) change the
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");

so it adds a class instead of inline css?

and

B) make the root category have the selected class too when in one of it's children?

This is my code (using your recent addition to stop dropdown showing:
<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").not('#Menu a').parent().parent().parent().parent().show();
$("a[href="+q+"]").not('#Menu a').parent().parent().show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
}
});

</script>

Great stuff!

akparade
07-13-2011, 05:19 PM
I've also just noticed... it doesn't seem to work with every category?? In one category it hid all sub-categories if i clicked on one sub-category and now every new sub-category I create, it does the same thing??

tonybarnes
07-13-2011, 05:26 PM
You can probably use .addclass('insert_class_name_here') (http://api.jquery.com/addClass/) instead of the .css() bit - never tried it, as the changes were simple enough so that I thought adding more css in would just make a headache later on !

For the 2nd bit, I think (!) you could use .parents() (http://api.jquery.com/parents/) and relate it back to the fist li - never used that though I'm afraid, and I'm not positive it will work. I've just tried a simpler option, and fallen fowl of it not doing a thing...

As yours is getting a bit more complicated, it might be worth hacking into the sidecategorylist.php to see if you can assign each level of the category list a number like this:

one
- one
- two
- one
- two
- three
- three
-two
-three

etc

That way you could call the parent items more easily via their classes, as they would be the sole parent of that class type, I think..!

tonybarnes
07-13-2011, 05:28 PM
Sorry, you posted while I was typing - how many categories deep do you go on your site? The code is set up to go 3 deep if I remember rightly, you need to add in

$("a[href="+q+"]").parent().parent().parent().parent().parent().par ent().show();

to add 1 more level, or

$("a[href="+q+"]").parent().parent().parent().parent().parent().par ent()..parent().parent().show();
$("a[href="+q+"]").parent().parent().parent().parent().parent().par ent().show();

to add in 2 more levels

akparade
07-13-2011, 05:29 PM
Not sure if I follow too well on what exactly to do for each issue as I'm only like 50% comfortable in php environment.

Did you also see my issue in my second post before yours??

akparade
07-13-2011, 05:31 PM
I only go two categories deep...

I have one original category of "Shop Mac" with 4 sub-cats then two new ones "Mens" and "Womens" with 4 sub-cats

tonybarnes
07-14-2011, 08:53 AM
Have sent you a reply PM

akparade
07-14-2011, 09:43 AM
Thanks for the reply. It seems to be working now - I altered a sub-cat to be 3 levels deep then changed it back to normal and it has made it work. Maybe it was a caching issue?

I'd love to be able to have the root category in the PagesMenu selected (with a class) when in a sub-cat but don't have a clue how to try .parents() or anything else.

Thanks!

tonybarnes
07-14-2011, 10:26 AM
Ok, great :)

Regarding the pages menu - having looked at your site you are using page items at the top for the main category headers - you can get this script to work on them also, it would just need another couple of lines adding in to the end of things

var c = $('#CategoryBreadcrumb li:first').next().html();
if(c !== null){
d = c.indexOf("=") + 2;
e = c.indexOf(">") - 1;
c = (c.substring(d, e));
$("a[href="+c+"]").not('.SideCategoryListClassic a').not('#CategoryBreadcrumb a').css("font-weight","bold");};

There must be a less ugly way of doing things (I've used .not twice to stop it from firing in a couple of places you wouldn't want it to) - but I'm pretty chokka I'm afraid, and this seems to work ok as it is !!

Just add the above in before the final

});

of that function :)

akparade
07-14-2011, 10:44 AM
You, my friend, are a godsend! :)

Thanks for your swift help.

tonybarnes
07-14-2011, 10:56 AM
I take it taht it works ok then, nicely :D

akparade
08-01-2011, 02:29 PM
Hey Tony,

Another little issue I have... The root menu (E.G. Mens, Womens) doesn't stay selected when you get to the product page. However, the sub-cat selected still does - just the root doesn't.

And, is there any way of keeping the Shop by Price option you choose selected? it doesn't show in the breadcrumbs, just the URL so i'm not sure?

Would love if the first issue got fixed mostly :)

Thanks!

Code so far:


<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").not('#Menu a').parent().parent().parent().parent().show();
$("a[href="+q+"]").not('#Menu a').parent().parent().show();
$("a[href="+q+"]").not('.Content a').addClass('category-selected');
}
var c = $('#CategoryBreadcrumb li:first').next().html();
if(c !== null){
d = c.indexOf("=") + 2;
e = c.indexOf(">") - 1;
c = (c.substring(d, e));
$("a[href="+c+"]").not('.SideCategoryListClassic a').not('#CategoryBreadcrumb a').addClass('root-child-selected');};
});

</script>

tonybarnes
08-02-2011, 11:21 AM
This should sort it (not tested!) - basically doing the same logic again for the productbreadcrumb instead of categorybreadcrumb :)

<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").not('#Menu a').parent().parent().parent().parent().show();
$("a[href="+q+"]").not('#Menu a').parent().parent().show();
$("a[href="+q+"]").not('.Content a').addClass('category-selected');
}

var c = $('#CategoryBreadcrumb li:first').next().html();
if(c !== null){
d = c.indexOf("=") + 2;
e = c.indexOf(">") - 1;
c = (c.substring(d, e));
$("a[href="+c+"]").not('.SideCategoryListClassic a').not('#CategoryBreadcrumb a').addClass('root-child-selected');
};

var f = $('#ProductBreadcrumb li:first').next().html();
if(f !== null){
g = f.indexOf("=") + 2;
h = f.indexOf(">") - 1;
f = (f.substring(g, h));
$("a[href="+f+"]").not('.SideCategoryListClassic a').not('#ProductBreadcrumb a').addClass('root-child-selected');
};


});

</script>

It is starting to get to the point where it could do with a little tidying up though, lol!

tonybarnes
08-02-2011, 11:22 AM
Sorry, just spotted the 'shop by price bit' - 2 secs

tonybarnes
08-02-2011, 11:25 AM
That should now also highlight the shop by price I believe, let me know :D

<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
$("a[href="+m+"]").addClass('category-selected');
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").not('#Menu a').parent().parent().parent().parent().show();
$("a[href="+q+"]").not('#Menu a').parent().parent().show();
$("a[href="+q+"]").not('.Content a').addClass('category-selected');
}

var c = $('#CategoryBreadcrumb li:first').next().html();
if(c !== null){
d = c.indexOf("=") + 2;
e = c.indexOf(">") - 1;
c = (c.substring(d, e));
$("a[href="+c+"]").not('.SideCategoryListClassic a').not('#CategoryBreadcrumb a').addClass('root-child-selected');
};

var f = $('#ProductBreadcrumb li:first').next().html();
if(f !== null){
g = f.indexOf("=") + 2;
h = f.indexOf(">") - 1;
f = (f.substring(g, h));
$("a[href="+f+"]").not('.SideCategoryListClassic a').not('#ProductBreadcrumb a').addClass('root-child-selected');
};


});

</script>

akparade
08-04-2011, 12:28 PM
Tony, you're a genius... I think it's time to place it in a separate .js file now though... haha. That'll still work, right?

tonybarnes
08-04-2011, 12:38 PM
Nicely :)

Yes, you can put it in a new .js file, just make sure its called on the right pages. In honesty, its not much code, you won't be saving much server load moving it

akparade
08-04-2011, 12:44 PM
Just noticed... if you sort by price it makes it bold nicely. However, when you then sort by high to low or alphabetical etc the class is removed... is that easy to change so it stays
bold on the price for all the different sort bys in the drop down?

Link example in a private message...

tonybarnes
08-04-2011, 12:53 PM
Erm, does it? I've just checked, can't get that to reproduce at all - and it shouldn't do?!?

tonybarnes
08-04-2011, 03:05 PM
Ah, ok, right, it does do that when you've selected the cheapest option - £0 - £x.

Interesting, when resorting the products, it changes the way it does it. So if you click on 0-30, and bestselling is on, you would get this:

http://yourstore.com/categories/topcat/subcat/?price_min=0&price_max=51&sort=bestselling

If you then click on alphabetical, you get this:

http://yourstore.com/categories/topcat/subcat/?price_max=51&sort=alphaasc

Notice how price_min=0& has been dropped?

Ok, you could try this:

<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var cheapcheck = m.match("?price_min=0&");
if (cheapcheck !== null) {
m.replace("?price_max", "?price_min=0&price_max"));
}
$("a[href="+m+"]").addClass('category-selected');
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").not('#Menu a').parent().parent().parent().parent().show();
$("a[href="+q+"]").not('#Menu a').parent().parent().show();
$("a[href="+q+"]").not('.Content a').addClass('category-selected');
}

var c = $('#CategoryBreadcrumb li:first').next().html();
if(c !== null){
d = c.indexOf("=") + 2;
e = c.indexOf(">") - 1;
c = (c.substring(d, e));
$("a[href="+c+"]").not('.SideCategoryListClassic a').not('#CategoryBreadcrumb a').addClass('root-child-selected');
};

var f = $('#ProductBreadcrumb li:first').next().html();
if(f !== null){
g = f.indexOf("=") + 2;
h = f.indexOf(">") - 1;
f = (f.substring(g, h));
$("a[href="+f+"]").not('.SideCategoryListClassic a').not('#ProductBreadcrumb a').addClass('root-child-selected');
};


});

</script>

Again, not tested, hopefully works, lol!

EDIT - made an obvious error, should be good now

edrishti
09-05-2011, 01:12 PM
hi tony

we have come back to you once again -

The accordion menu does not stay open to show sub-categories when
you click on the category link.

This only works when you click on a category and it opens, but when you click on a sub category, the page refreshes and the menu closes again. Before it used to keep the sub categories displayed until you open a separate category

url is - http://www.sosolo.co.uk/

please help

tonybarnes
09-05-2011, 02:12 PM
By the looks of the site you have set it up so that it no longer adds "categories" or "products" to the URL - this is what is stopping the JS from working.

You could try this:

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
$(this).toggleClass('opened');
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");

});

but you may find that it highlights things randomly on pages that you don't want it to!! Basically the javascript was fairly reliant upon the structure.

edrishti
09-05-2011, 02:18 PM
i have tried your code now
it but the same thing happening as when click on sub category menu - and goes to that page -- all menu gets close - i want the similar category menu with sub menu stay open

tonybarnes
09-05-2011, 02:26 PM
Right, try this to see if that works -

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(
function() {
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
$(this).toggleClass('opened');
return false;
}
}
);
var q = location.href;
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");

});

Basically chopping functionality out of it to find a point where it works, then logic will need to go back in. Like I said though, I think the URL rewrites (or however you've achieved it) could end up adding a lot to this code

edrishti
09-05-2011, 02:50 PM
thanks a lot for your effort - but still now working - it closes whenever goes to another page

edrishti
09-08-2011, 01:42 PM
it not working yet - i think you understood that its working - do you have a solution for this

tonybarnes
09-08-2011, 02:09 PM
Sorry, but looking at what I've put up, and what I can see on your site, I can't rationalise any obvious reasons for it not working - probably not seeing the wood for the trees, sorry.

As I said, the removal of /categories/ and /products/ from the URLs is what has caused this in the first place

edrishti
09-20-2011, 11:19 AM
hi tony

once again need your help -

we have added your accordion menu in below site
http://www.steapco.com/black/

in this accordion menu - we would like the link to be highlighted
for example - if we click Black link and goes to the page of Black tea
we would like the menu black to be highlighted in accordion menu
-- now its working only as hover

tonybarnes
09-20-2011, 11:42 AM
Hi - looking at that site it looks to have the same customisation where the /categories/ and /products/ have been removed, so it will hit the same problems as before.

Looking at it again, you should be able to put the logic together by pulling apart the URL for one of the images in the category views, and the product breadcrumb in the product views. Pretty much a re-write of the system, and unfortunately not something that I currently have the spare time to do without charging - I've too much on at the minute to do anymore 'pro bono' on this one, especially as it is taking the customisation in a completely new direction. Sorry.

darrenjforde
09-23-2011, 03:29 AM
Hi Tony, Great work and thanks for making it available. I have been tinkering around a bit this evening on a site I am currently building and it works great. I have 2 main categories (will be more in the future), up to 19 sub categories and in some cases up to 15 Grandchild categories so you can imagine how this helps.

I know your busy but I have a small query: Is it possible to modify the script so that expanding a subcategory, collapses another that might already have been expanded. This would prevent the list growing too long if the visitor didn't re-click the sub-cat to collapse it.

By way of my small contribution to this thread, in playing around with the code I discovered that by changing:

$(function() {
$('#SideCategoryList ul ul').hide();
$('#SideCategoryList li a').click(

to:

$(function() {
$('#SideCategoryList ul ul ul').hide();
$('#SideCategoryList li a').click(

...you can have the sub-cats display on page load. This helped me as I only had 2 top level categories and the page looked rather blank but it may not suit everyone.

My shop is still in dev so I can post a url by PM if you need it. I will post the example when I am just about to launch, hopefully in the next week.

Thanks again.

Darren

tonybarnes
09-23-2011, 09:01 AM
Hi Darren,

That's actually pretty easy

$(function() {
$('.SideCategoryListClassic ul ul').hide();
$('.SideCategoryListClassic li a').click(
function() {
$('.SideCategoryListClassic ul ul').not($(this)).not($(this).parent().parent()).s lideUp(400);
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
}

});

Basically just adding this line in

$('.SideCategoryListClassic ul ul').not($(this)).not($(this).parent().parent()).s lideUp(400);

That will close up any other open lists, apart from the one that you are in, and will keep the one you are inexpanded if it is open more than 1 level. The above will work for 3 levels deep, for 4 levels it would need to be:

$('.SideCategoryListClassic ul ul').not($(this)).not($(this).parent().parent()).n ot($(this).parent().parent().parent().parent()).sl ideUp(400);

It may need some tweaking for your application - adding in the extra ul should probably suffice.

It's a nice touch actually, have left it on our site!

darrenjforde
09-23-2011, 10:14 AM
Hi Tony, It works great. Fantastic work and thanks for your help. Here is the script code I'm using:

<script type="text/javascript">

$(function() {
$('#SideCategoryList ul ul ul').hide();
$('#SideCategoryList li a').click(
function() {
$('#SideCategoryList ul ul').not($(this)).not($(this).parent().parent()).s lideUp(400);
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
}
});

</script>

I have 3 cat levels and also worth noting is my 'SideCategoryList' is an 'id #' and not a class (possibly because of an older version of the shop software), so I changed the dot to a hash, and also it is called simply 'SideCategoryList' without the 'classic' appended.

One final note, I found it better to refrain from adding a third ul reference in the addition you gave me as when I clicked on a sub category in my second top level category - it would collapse the first main category therefore bringing the lower one nicely up above the fold. If you remember, in my set up, the third ul in [$('#SideCategoryList ul ul ul').hide();] displays my sub categories by default on load.

This may sound somewhat confusing but all will be revealed hopefully next week when I can go live and post this example.

Thanks again for your help.

Darren

tonybarnes
09-23-2011, 10:18 AM
Ah right, yes, it was changed in v6 I believe.

Glad its working nicely, and looking forward to the reveal :)

edrishti
09-23-2011, 05:28 PM
hi tony

http://www.steapco.com/

We tried to leave the highlighting part -

we added your code to show the first category and its showing in all pages perfectly

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

We having problem as when we click the main category called function and then click on sub category - the whole accordion of function menu gets closed

what we want just when we go to next category called function then loose tea menu get close and function menu stays open until we click on first (loose ) category

like the way in this accordion menu working http://www.savant-health.com/

tonybarnes
09-26-2011, 08:57 AM
Hi Edrishti,

Just had a look and you've chopped out a lot of the code, and the URL structure that you are using is still different to how the code was designed to work also.

Is this a BigCommerce site? Is it down to this that the URL is different?

You could try this as your function:


$(function() {
$('.SideCategoryListClassic ul ul').hide();
$('.SideCategoryListClassic ul ul:first').show();
$('.SideCategoryListClassic li a').click(
function() {
$('.SideCategoryListClassic ul ul').not($(this)).not($(this).parent().parent()).s lideUp(400);
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);

var p = $('#CartegoryBreadcrumb li:last').prev().html();
if(p !== null){
$("a[href="+p+"]").parent().parent().show();
$("a[href="+p+"]").show();
};
});


BUT looking at how the site is working, this will then be useless when you proceed into a product page - as the product breadcrumb doesn't have any reference to the category route that you have taken.

If this is a BigCommerce site, then I honestly can't see a quick way around this (as you can't hack the PHP). If it is just on ISC, then if you find charliefoxtrots breadcrumb hack, then you would probably be able to get this working on the product pages also.

4cabling
12-06-2011, 04:33 AM
Does anyone have an instructions on installing this Accordion Menu in ISC 6.1.6 / 6.1.7?

I'm happy to pay for any development time needed to update this code for the newer ISC, but I need it happening quickly.

Thanks,

Dom

myshop
12-06-2011, 04:41 AM
Why on earth would you want to do that? Its included! :-) (well, the much better flyout menus are included)

4cabling
12-07-2011, 12:55 AM
We have a lot of subcategories, and the flyouts are too large. An accordion menu will keep the menu more compact in a vertical list.

tonybarnes
12-09-2011, 09:31 AM
I'm fairly sure it should work as it is? Do you have a URL to look at?

$(function() {
$('.SideCategoryListClassic ul ul').hide();
$('.SideCategoryListClassic li a').click(
function() {
$('.SideCategoryListClassic ul ul').not($(this)).not($(this).parent().parent()).s lideUp(400);
if($(this).next().is('ul')) {
$(this).next().slideToggle(400);
return false;
}
}
);
var m = location.href;
var n = m.substring(0,m.indexOf('?'));
var q = n;
var prodcheck = m.match("/products/");
var catcheck = m.match("/categories/");
if ((prodcheck !== null) || (catcheck !== null)) {
if (n.length < 1) {
q=m;
}
var p = $('#ProductBreadcrumb li:last').prev().html();
if(p !== null){
l = p.indexOf("=") + 2;
r = p.indexOf(">") - 1;
p = (p.substring(l, r));
q=p;
}
$("a[href="+q+"]").parent().parent().parent().parent().show();
$("a[href="+q+"]").parent().parent().show();
$("a[href="+q+"]").show();
$("a[href="+q+"]").not('.Content a').css("font-weight","bold");
}
});

4cabling
12-12-2011, 12:19 AM
We're trying to get it to work on http://test.4cabling.com.au/616/ and we've obviously done something wrong.

Thanks.

tonybarnes
12-12-2011, 09:03 AM
Ah, right - looking at your site you're using the first 'incarnation' of the code from this thread, which was done via the accordion system. If you look at the code I posted in my last post, this achieves the same effect, but just using jquery, and also has additional functionality built in - i.e. stays open on relevant products/categories.

Looking at your html structure I think you could just drop that lot into htmlhead without having to revert the accordion additions that you've already added to your code. If you've not done anything else to customise your sidecategorylist, you could just delete your snippet to revert to the master one.

tonybarnes
12-12-2011, 09:04 AM
Oh - example of how it is currently working here - http://www.savant-health.com/ - that's using the code I've posted above. Browsig through categories leaves them open, bolded, and relevant :)

4cabling
12-27-2011, 04:32 AM
Can anyone write me up some quick instructions on how to install the accordion menu using the JS above? Putting the JS into the header is no problem, but where do I edit ISC 6.1.8 to get the class id into the <li> for the menu?

tonybarnes
01-03-2012, 08:51 AM
Bob up a link to your site and we can show you the code you need