Expanding menu depending on category

[frosco]

Hi! This one is a little over my head, but I'd really like to accomplish it. Here's my code so far:

'Setting Connection 
set MyConnection = server.createobject("ADODB.Connection") 
set rsProducts = server.createobject("ADODB.recordset") 
%> <!--#include file="db.asp"--> <%

'Get ALL records from the database
		SQLQuery = "SELECT * FROM Query2 WHERE Active = 'Yes' ORDER BY Proper, LineOrder"
		set rsProducts = MyConnection.Execute(SQLQuery)	

do while not rsProducts.EOF

'Get the form fields
	Category = rsProducts("Category")
	Product = rsProducts("Product")
	Proper = rsProducts("Proper")

if NOT rsProducts.EOF OR rsProducts.BOF then
 	While NOT rsProducts.EOF
 		if tmpCat <> rsProducts("Category")then
 			Response.Write "</small><strong>"& rsProducts("Proper") &"</strong><br/><small>"
 		end if
 				Response.Write "<font face='wingdings'>Ø </font>" & rsProducts("Product") &"<br/>"
 		tmpCat = rsProducts("Category")
 	rsProducts.MoveNext()
 	Wend
 end if
loop
MyConnection.close

and here is the page it's displayed on

http://www.wittymom.com/sidemenu.asp

What I'd like to accomplish is to have the products expanded only when that category is chosen, and the other categories minimized. How do I go about that? The categories will be chosen from the field rsProducts("Category") from my main menu. i.e., this is how it is now

CATEGORY A (<-- chosen category)
- Product 1
- Product 2
CATEGORY B
- Product 1
- Product 2
CATEGORY C
- Product 1
- Product 2

...and this is how I would like it to be

CATEGORY A (<-- chosen category)
- Product 1
- Product 2
CATEGORY B
CATEGORY C



Thanks, as always. Couldn't have gotten this far without SitePoint!!

Amber

[tahirjadoon]

i would say collapse or expand categories on the client side. Do not refresh the page. You are looking for some thing like this site has:

http://www.mco.org

check this thread out

http://www.sitepoint.com/forums/showthread.php?t=277964

toggle image - or + depending on the state. onclick event call the javascript function to collapse or expand the category

 
<img border="0" id="picCATNAME" src="- image" onclick="javascript:showhide('CATNAME');">
<div id="CATNAME"> for each category id should be unique
put the categories here
</div>
function showhide(CAT) { 
  var objCat = document.getElementById(CAT);
  var objPic = 
document.getElementById('pic'+CAT); //image tag should have the id as pic+cat name
  if (objCat && objCat.style.display=="none") {
	objCat.style.display="";
	objPic.src = objPic.src.replace("plus.", "minus.");
  } else {
	if (objCat) { 
	  objCat.style.display="none"; 
	}
	objPic.src = objPic.src.replace("minus.", "plus.");
  }
}

[tahirjadoon]

please check out this example also.

http://www.dynamicdrive.com/dynamici...switchmenu.htm

[frosco]

Thank you...that's exactly what I want. Is there any problem with incorporating javascript with asp code? This is all a little over my head, but I'm willing to give it a go.

Thanks!

[tahirjadoon]

by putting the javascript in js file, you have your code at one place and easily include that js file in multiple pages. Otherwise you have to put javascript on all the pages where you want to use, making maintenance difficult.

[frosco]

Okay...I've finally figured it out. Here's the final result (on the left):

http://www.wittymom.com/productview.asp?page=id

I used a script from Dynamic drive--not the same one, but one similar, and I incorporated my DB fields so I never have to update the categories & submenus manually. They'll run from the db, which was my initial goal.

If anyone wants the code, I'm glad to share it.

Amber

[tahirjadoon]

Could you please post the code here, this might help some one else.

[frosco]

Absolutely....

This is the end result on my website. My product menu is so long that I had to come up with a way to condense it at the push of a button and at the viewer's control:

http://www.wittymom.com/productview.asp?page=stun

I'm using the code, CSS & JS files from Dynamic Drive (here):

http://www.dynamicdrive.com/dynamici...witchmenu2.htm

I made no changes to the JS file, some to the CSS file, but that's of course optional. Just aesthetics. I left the header code alone. The only thing I changed was the menu code to pull in values from my database:

if NOT rs.EOF OR rs.BOF then
  While NOT rs.EOF

    if tmpCat <> rs("Category")then

      response.write 	"</div></div><div class='mainDiv' state='0'>"
      response.write	"<div class='topItem' classOut='topItem' classOver='topItemOver'onMouseOver='Init(this);' >"

      ' ADD/CHANGE/DELETE A BULLET TO THE LEFT OF YOUR MAIN CATEGORY NAME
      response.write 	"<font face='Wingdings'>Ú</font>"

      ' PULL IN THE MAIN CATEGORY FIELD
      response.write	rs("MainCategory")

      response.write	"</div><div class='dropMenu' ><div class='subMenu' state='0'>"

    end if	

      ' SPECIFY THE LINK WHERE YOUR SUBITEMS WILL TAKE YOU
      response.write	"<span class='subItem' classOut='subItem' "
      response.write	"classOver='subItemOver'><a href='http://www.yourwebsite.com/yourpage.asp?criteria="
      response.write	rs("criteriafield")

      ' ADD/CHANGE/DELETE A BULLET TO THE LEFT OF EACH ITEM IN THE SUBCATEGORY LIST
      response.write	"'><font face='Wingdings'>Ø</font>"

      ' PULL IN THE SUB CATEGORY FIELD--WILL LOOP TO END
      response.write	rs("SubCategory")
      response.write	"</a></span><BR />"

     tmpCat = rs("Category")

     rs.MoveNext()
   Wend
 end if

That's it, I'm sure there's more customization that could be done, but I was lucky to get it this far with my limited brain cells!! Hope someone else can use it...

Thanks for all of your help, and thanks Dynamic Drive!

Amber