Thread: Left navigation accordian

I have looked and looked through the forums to see if I could find this answer, but I got nothing. Or at least no for sure answer. I am trying to turn one of the categories on the left navigation to an accordian style. I want it to expand only when clicked on. I noticed a couple of posts on this, but nothing with a definate answer for me. Here is the version I am running:

Version (Code/DB): AspDotNetStorefront ML 8.0.1.1/8.0.1.1

I know that on version 9.0.1 it is preset to what I am looking for, but how do I change the version I have to make it do this?

Any help would be much appreciated!

I am going to have it real soon, I went ahead and push through. I am starting to test some ideas, I have been putting this off thought I might get a response. Once I have how I got it to work I will post how I accomplished it step-by-step. Wish me luck!

So after searching for quite some time and messing with all kinds of files. I found it the simple way to make an accordion style left nav. It really is too simply and you do not have to change any xsl files or any configs. There are two files you will need to format to do this:

(I will give the path to them)
skins>Skin_1(Now this could be whatever skin you are using)>hometemplate.ascx
skins>Skin_1(Now this could be whatever skin you are using)>style.css

That's it only those two files. Here are the edits you will need to make.
First open the hometemplate.ascx in the head add this code to Javascript:

Code:

<!--
function switchMenu(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "block" ) {
		el.style.display = 'block';
	}
	else {
		el.style.display = '';
	}
}
//-->

Now to send this javascript something to work with go to leftHeader and add this:

Code:

<a onClick="switchMenu('yourVariableGoesHere');" title="Accordion" style="cursor:hand;cursor:pointer;"></a>

So your leftWrap will look like this:

Code:

<div id="leftWrap">
        <div class="navHeader">Browse (!StringResource Name="AppConfig.CategoryPromptPlural"!)</div>
        <div class="leftNav" id="categories">(!XmlPackage Name="rev.categories"!)</div>
        <div class="navHeader"><a onClick="switchMenu('manufacturers');" title="Switch the Menu" style="cursor:hand;cursor:pointer;">Browse (!StringResource Name="AppConfig.ManufacturerPromptPlural"!)</a></div>
        <div class="leftNav" id="manufacturers">(!XmlPackage Name="rev.manufacturers"!)</div>
        <div class="navHeader">Browse (!StringResource Name="AppConfig.SectionPromptPlural"!)</div>
        <div class="leftNav" id="departments">(!XmlPackage Name="rev.departments"!)</div>
        <div class="navHeader">Help &amp; Info</div>
        <div class="leftNav" id="helpbox">(!Topic Name="helpbox"!)</div>
      </div>

That is an example with what it will look like with content.
You are done with the hometemplate.ascx you may save and close that doc. Now open style.css, this will be simple it is just one thing to add. Here is the code:

Code:

#divTagID
{
	/* The expandable lists */
	display:none;
}

So you will pulling it from the div class leftNav call it's ID. Here is what mine looks like:

Code:

#manufacturers
{
	/* The expandable lists */
	display:none;
}

Here is the place I pulled the ID from:

Code:

<div class="navHeader"><a onClick="switchMenu('manufacturers');" title="Switch the Menu" style="cursor:hand;cursor:pointer;">Browse (!StringResource Name="AppConfig.ManufacturerPromptPlural"!)</a></div>
        <div class="leftNav" id="manufacturers">(!XmlPackage Name="rev.manufacturers"!)</div>

I hope this helps out if you have any questions please feel free to contact me. Good luck and have fun!

My apologies I forgot one thing, so when you insert what I have in the previous post. All you will need to do is make the same modifications you made in the hometemplate.ascx to the template.ascx as well. That doc can be found in the same folder as the hometemplate, if you have any other questions post I would love to help out.

Look forward to hearing questions and comments, HAPPY CODING

You might be interested to take a look at this: http://www.dynamicdrive.com/dynamici...ordionmenu.htm
It’s very easy to implement (similar to your description) and it’s absolutely free. That website is all about JavaScript. You can find a lot of useful things for your storefront. Hope this helps.

Thank you, it is helpful. I have gone to that site before, while was looking for the answer. I put the basic simple answer on how to get it working. That link will help you display the in and out of the accordian different. Thanks West, helpful information

Would you happen to know how to do this in V9? I can't seem to find it anywhere. Thanks.

I will look into this and see if I can't figure something out for yah

Here is article talk abut
Left Menu Accordion using jQuery in AspDotNetStoreFront