JavaScript - Help With Expand/collapse Menu

Hey guys.

I've done a script where a paragraph expands when the expand button is clicked (plus.gif) and contracts when the same button is clicked again.

Only problem is I want the icon to change to a minus icon (minus.gif) once it the paragraph has expanded.

I'll obviously need to include this in the script, however I'm not sure how to go about it.

Collapsed:



Expanded:



Here is the HTML:

Code:

<script type="text/javascript" src="expandCollapse.js"></script>

<a href="javascript:void(0" onclick="return toggleMe('para2')" style="color:#ec008c"><p><img src="images/plus.gif" border="0" hspace="6" vspace="0" /></a><strong><font size="3">Beginners 2</font></strong></p>
<div id="para2" style="display:none"><p>*</p>
<p>Students can progress to this level upon completion of the Beginners 1. You will be taught slightly more complex pole tricks and combinations that require all the strength and agility you have gained so far. This is when you will go upside down on the pole, and how to come down gracefully!</p>
<p>*</p>
<p><o:p></o:p></p>
<p>Cost: $220.00</p>
<p>*</p>
<p><o:p></o:p></p>
<p>Length: 1 Hour</p>
<p>*</p>
<p><o:p></o:p></p>
<p>Duration: 8 Weeks<o:p></o:p></p>
<p><o:p>*</o:p></p></div>

And here is the current javascript in 'expandCollapse.js':

Code:

function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

Any help much appreciated, cheers!

Hi everyone I wondered if someone may help me.

I downloaded a free web template that I am converting into .tpl file for a php script I use everything is going fine apart from one thing the collapse and expand script for categories in the template, it works perfectly on the template as downloaded but when it is in my .tpl files that work with the php script the collapse expand script works but the images are not displayed when you collapse then when you expand againe the expanded icon is also not displayed, as I say this works perfectly as downloaded in a .html file but not in the .tpl when running the php.

Could someone take a look at the coding and tell me what maybe wrong I know nothing about Java script, PHP only a bit about html and I am pulling my hair out.

Here is the Java script Bit
Code:

  $('#wrap-categories .expanded').click(function() {
    if($("ul#category-menu").css("display") == 'none'){
      $('#wrap-categories .expanded').css("background", "url(images/cat-expanded-icon.png) no-repeat center center");
      $("ul#category-menu").show();
    }
    else{
      $('#wrap-categories .expanded').css("background", "url(images/cat-collapsed-icon.png) no-repeat center center"); 
      $("ul#category-menu").hide();
    }
  });

My CSS for the colapsable stuff
Code:

#wrap-categories .wrap-title-black .expanded{ float: left; width: 40px; height: 40px; background: url(../images/cat-expanded-icon.png) no-repeat center center; }
#wrap-categories .wrap-title-black .collapsed{ float: left; width: 40px; height: 40px; background: url(../images/cat-collapsed-icon.png) no-repeat center center; }
#wrap-categories .wrap-title-black .expanded:hover, #wrap-categories .wrap-title-black .collapsed:hover{ cursor: pointer; }

And finaly the actual .tpl code for the colapsable bit
Code:

<div id="wrap-categories">
        <div class="wrap-title-black">
          <h2 class="nice-title">{L_276}</h2>
          <div class="expanded"></div>
        </div>
        <ul id="category-menu">
        <!-- BEGIN cat_list -->
          <li><a href="browse.php?id={cat_list.ID}">{cat_list.NAME} {cat_list.CATAUCNUM}</a></li>
           <!-- END cat_list -->
           <li><a href="{SITEURL}browse.php?id=0">{L_277}</a></li>
        </ul>
      </div>

I would apreciate some help and thank you in advance

I have the following functions:

Code:

<script> 

var timerlen = 5; 
var slideAniLen = 500; 
var timerID = new Array(); 
var startTime = new Array(); 
var obj = new Array(); 
var endHeight = new Array(); 
var moving = new Array(); 
var dir = new Array(); 

function slidedown(objname){ 
  if(moving[objname]) 
    return; 
  
  if(document.getElementById(objname).style.display != "none") 
    return; // cannot slide down something that is already visible 
  
  moving[objname] = true; 
  dir[objname] = "down"; 
  startslide(objname); 
} 
  
function slideup(objname){ 
  if(moving[objname]) 
    return; 
  
  if(document.getElementById(objname).style.display == "none") 
    return; // cannot slide up something that is already hidden 
  
  moving[objname] = true; 
  dir[objname] = "up"; 
  startslide(objname); 
} 

function startslide(objname){ 
  obj[objname] = document.getElementById(objname); 
  
  endHeight[objname] = parseInt(obj[objname].style.height); 
  startTime[objname] = (new Date()).getTime(); 
  
  if(dir[objname] == "down"){ 
    obj[objname].style.height = "1px"; 
  } 
  
  obj[objname].style.display = "block"; 
  
  timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen); 
} 

function slidetick(objname){ 
  var elapsed = (new Date()).getTime() - startTime[objname]; 
  
  if (elapsed > slideAniLen) 
    endSlide(objname) 
  else { 
    var d =Math.round(elapsed / slideAniLen * endHeight[objname]); 
    if(dir[objname] == "up") 
      d = endHeight[objname] - d; 
  
    obj[objname].style.height = d + "px"; 
  } 
  
  return; 
} 

function endSlide(objname){ 
  clearInterval(timerID[objname]); 
  
  if(dir[objname] == "up") 
    obj[objname].style.display = "none"; 
  
  obj[objname].style.height = endHeight[objname] + "px"; 
  
  delete(moving[objname]); 
  delete(timerID[objname]); 
  delete(startTime[objname]); 
  delete(endHeight[objname]); 
  delete(obj[objname]); 
  delete(dir[objname]); 
  
  return; 
} 

</script>

I have the following div tag:

Code:

<div id='mydiv' style='display:none'>some content</div>

....and then I have an ahref tag like so:

Code:

<a href="javascript:;" onclick="slidedown('mydiv');">Slide Down</a>
<a href="javascript:;" onclick="slideup('mydiv');">Slide Up</a>

What happens is that it just unhides real quick, and then will not work after that...it does shoot an error, which is 'Invalid argument'...and nothing else.

It is craping out on the following line:

obj[objname].style.height = d + "px";

not sure why...so if anyone has any insight on what I am doing wrong...please let me know.

Is it possible to have a thumbnail of a video, then when you click it it expands so you can watch it without having to link to a different page? I'm thinking kind of like how people link youtube videos on facebook

i presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following.

var channelsGroups = new Array();
var channelsChildren = new Array();
channelsGroups[0]= new Array('Mars Public', 'MARS-PUB');
channelsChildren[0]=new Array();
channelsGroups[1]= new Array('Mars Private', 'MARS-PRIVA');
channelsChildren[1]=new Array();
channelsGroups[2]= new Array('Internet Booking Engine', 'IBE');
channelsChildren[2]=new Array();
channelsGroups[3]= new Array('mars Private Agent Specific', 'M-P-AGENT');
channelsChildren[3]=new Array();
channelsChildren[3][0]=new Array('AGT_002',' AGT_002 ');
channelsChildren[3][1]=new Array('CARLSON WAGONLIT AUSTRALIA PTY',' 235830 ');
channelsChildren[3][2]=new Array('Travel Zone',' TRAVELZONE ');
channelsChildren[3][3]=new Array('Worldlink Travels',' WORLDLINK ');
channelsChildren[3][4]=new Array('AAAAAAARFDS',' ADM2 ');
channelsChildren[3][5]=new Array('AAASSRet',' DMM3 ');
channelsChildren[3][6]=new Array('Adrian Travels',' DMM1 ');
channelsChildren[3][7]=new Array('Buraha Travels',' DMM2 ');
and more

Output in the textArea is as following
i presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following.

i presently have a text area which is generated using two arrays.It is loaded at the screen load. It is as following.

Mars Public
Mars Private
Internet Booking Engine
mars Private Agent Specific
-AGT_002
-CARLS...

I hope you inderstand the pattern. I want first to display only the groups(Mars Public, Mars Private) and when someone clicks on mars private Agent specific, the list of agents appear. There are other groups below agents and those groups also may have children.Those groups also should have the same on click functioanlity? Any Idea?

Thank you in advance...

Hey guys I am having little trouble with this jQuery. The code seems to be working in all browsers and suffers only minor issues in IE. For some reason, the last 4 items do not expand/contract on IE (ONLY). Any help will be gladly appreciated.

Here's my code:
Code:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.modbargains.com/images/Javascript/Collapse/animatedcollapse.js">
</script>


<script type="text/javascript">

animatedcollapse.addDiv('bodykits', 'fade=1,height=70px')
animatedcollapse.addDiv('brakes', 'fade=1,height=40px')
animatedcollapse.addDiv('chipsandtuners', 'fade=1,height=20px')
animatedcollapse.addDiv('engineparts', 'fade=1,height=260px')
animatedcollapse.addDiv('exhaust', 'fade=1,height=270x')
animatedcollapse.addDiv('exterior', 'fade=1,height=160px')
animatedcollapse.addDiv('interior', 'fade=1,height=105px')
animatedcollapse.addDiv('suspension', 'fade=1,height=155px')
animatedcollapse.addDiv('wheels', 'fade=1,height=280px')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

<style type="text/css">
.collapselist li {
	padding:2px 0px 2px 8px;
	background:url(http://www.modbargains.com/Theme/02/c_arrow.gif) no-repeat 0px 0px;}
</style>

</head>
<body>


<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('bodykits')">Body Kits</a>

<div class="collapselist" id="bodykits" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/iCarbon-Carbon-Fiber-Body-Parts.htm">iCarbon Products</a></li>
                <li><a href="http://www.modbargains.com/ARKYM-Carbon-Fiber-Areo-Kits.htm">ARKYM CF Aero Kits</a></li>
                <li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>


        
	</ul>
</div>

<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('brakes')">Brakes</a>

<div class="collapselist" id="brakes" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/Brembo-brakes.htm">Brembo Brakes</a></li>
                <li><a href="http://www.modbargains.com/Stoptech.htm">StopTech Brakes</a></li>


        
	</ul>
</div>

<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('chipsandtuners')">Chips and Tuners</a>

<div class="collapselist" id="chipsandtuners" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/Cobb-AccessPORT-ECU-Flash-BMW-N54-135i-335i-535i-AP-BMW-001.htm">Cobb AccessPORT</a></li>        
	</ul>
</div>

<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('engineparts')">Engine Parts</a>

<div class="collapselist" id="engineparts" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/afe-power-parts.htm">aFe Power Intakes</a></li>
                <li><a href="http://www.modbargains.com/OEM-BMW-Parts.htm">OEM BMW Parts</a></li>
                <li><a href="http://www.modbargains.com/OEM-BMW-Performance-Parts.htm">OEM BMW Performance Parts</a></li>
                <li><a href="http://www.modbargains.com/Rogue-Engineering.htm">Rogue Engineering Parts</a></li>
                <li><a href="http://www.modbargains.com/Rogue-Engineering.htm">Rogue Engineering Parts</a></li>
                <li><a href="http://www.modbargains.com/Evolution-Racewerks.htm">Evolution Racewerks</a></li>
                <li><a href="http://www.modbargains.com/Cusco-Suspensions-Strut-Bars-Braces.htm">Cusco Strut Bars/Braces</a></li>
                <li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
                <li><a href="http://www.modbargains.com/Active-Autowerke.htm">Active Autowerke</a></li>


        
	</ul>
</div>

<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('exhaust')">Exhaust</a>

<div class="collapselist" id="exhaust" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/Remus-Exhaust.htm">Remus SportExhaust</a></li>
                <li><a href="http://www.modbargains.com/Supersprint-Performance-Exhaust-Systems.htm">Supersprint</a></li>
                <li><a href="http://www.modbargains.com/OEM-BMW-Parts.htm">OEM BMW Parts</a></li>
                <li><a href="http://www.modbargains.com/OEM-BMW-Performance-Parts.htm">OEM BMW Performance Parts</a></li>
                <li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
                <li><a href="http://www.modbargains.com/Eisenmann-Exhaust.htm">Eisenmann-Exhaust</a></li>
                <li><a href="http://www.modbargains.com/Borla-Exhausts.htm">Borla Exhaust</a></li>
                <li><a href="http://www.modbargains.com/Active-Autowerke.htm">Active Autowerke</a></li>


        
	</ul>
</div>

<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('exterior')">Exterior</a>

<div class="collapselist" id="exterior" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/OEM-BMW-Parts.htm">OEM BMW Parts</a></li>
                <li><a href="http://www.modbargains.com/OEM-BMW-Performance-Parts.htm">OEM BMW Performance Parts</a></li>
                <li><a href="http://www.modbargains.com/iCarbon-Carbon-Fiber-Body-Parts.htm">iCarbon Products</a></li>
                <li><a href="http://www.modbargains.com/ARKYM-Carbon-Fiber-Areo-Kits.htm">ARKYM CF Aero Kits</a></li>
                <li><a href="http://www.modbargains.com/Evolution-Racewerks.htm">Evolution Racewerks</a></li>
                <li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>


        
	</ul>
</div>

<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('interior')">Interior</a>

<div class="collapselist" id="interior" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/OEM-BMW-Parts.htm">OEM BMW Parts</a></li>
                <li><a href="http://www.modbargains.com/OEM-BMW-Performance-Parts.htm">OEM BMW Performance Parts</a></li>
                <li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>
                <li><a href="http://www.modbargains.com/Active-Autowerke.htm">Active Autowerke</a></li>


        
	</ul>
</div>

<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('suspension')">Suspension</a>

<div class="collapselist" id="suspension" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/KW-Suspension.htm">KW Suspension</a></li>
                <li><a href="http://www.modbargains.com/PowerFlex-Urethane-Suspension-Bushings.htm">PowerFlex Suspension Bushings</a></li>
                <li><a href="http://www.modbargains.com/HR-Suspensions.htm">H&R Suspensions</a></li>
                <li><a href="http://www.modbargains.com/Cusco-Suspensions-Strut-Bars-Braces.htm">Cusco Suspensions</a></li>
                <li><a href="http://www.modbargains.com/UUC-Motorwerks-Performance.htm">UUC Motorwerks Performance</a></li>


        
	</ul>
</div>

<div style="clear:both"></div>
<img id="ctl00_feLeft_dlSubmenuList_ctl04_ctl00_dlProductCategory_ctl00_imgArrow" src="Theme/02/c_arrow.gif" style="margin-left:6px;" border="0" /><a href="javascript:animatedcollapse.toggle('wheels')">Wheels</a>

<div class="collapselist" id="wheels" style="width: 160px; display:none;">
	<ul style="list-style:none; padding:2; margin:0;">
		        <li><a href="http://www.modbargains.com/Alufelgen-Wheels-BMW.htm">Alufelgen </a></li>
        <li><a href="http://www.modbargains.com/Avant-Garde-Wheels.htm">Avant Garde </a></li>
        <li><a href="http://www.modbargains.com/Axis-Wheels.htm">Axis </a></li>
        <li><a href="http://www.modbargains.com/BMW-Replica-Wheels.htm">BMW Replica </a></li>
        <li><a href="http://www.modbargains.com/EXE-Wheels.htm">EXE </a></li>
<li><a href="http://www.modbargains.com/Forgestar-Wheels.htm">Forgestar </a></li>
        <li><a href="http://www.modbargains.com/iForged-Wheels.htm">iForged </a></li>
        <li><a href="http://www.modbargains.com/Miro-Wheels.htm">Miro </a></li>
        <li><a href="http://www.modbargains.com/TSW-Wheel.htm">TSW </a></li>
        <li><a href="http://www.modbargains.com/Ultra-Wheels.htm">Ultra </a></li>
        <li><a href="http://www.modbargains.com/VMR-Wheels.htm">VMR </a></li>
        <li><a href="http://www.modbargains.com/VW-Audi-Replica-Wheels.htm">Audi/VW Replica </a></li>
        <li><a href="http://www.modbargains.com/_e/dept/66/Linea_Corse_Wheels.htm">Linea Corse </a></li>
        <li><a href="http://www.modbargains.com/_e/dept/105/Mercedes_Replica_Wheels.htm">Mercedes Replica </a></li>

        
	</ul>
</div>



</body>

Hello,

Can anyone tell me where I can find the code being used here to expand and collapse text(under the Bio section). It's exactly what I am looking for and would be much appreciated. Thanks.

Hi,

I want to make a list that expands and collapses like on the lynda.com site. See example
http://www.lynda.com/Rhino-4-tutoria...g/59223-2.html

I would also like to make it fade in and out when collapsing and expanding. I haven't been able to find a lot of information on how to do this. Would this be best using something like jQuery or just plain JavaScript? By the way I'm just starting to learn JavaScript, so any level of explanation is helpful.

I am a beginner with coding and have no idea what I'm doing. Hopefully I'm posting this on the right forum.

I have just registered a domain for my business and am maintaining my webpage through tumblr. I have stumbled around into finding a code that will allow me to hide/collapse certain content. The problem is that I want it to become an icon that changes from a "plus" to a "minus" sign, or any one character to another, as opposed to having it be the title that gets clicked on in order to be expanded.

One major issue I'm having revolves around content expanding where a link is displayed. I am coding this on the "links" section of my page, which is links to other businesses and webpages I support. So, for example, I'll have a link to a business, and the hidden content will be something I have to say about it, that the person viewing can chose to read by clicking to expand content. I want it hidden by default to take up less space.

This is the code I put into my head section:

<!-- COLLAPSIBLE TEXT -->

<!-- This goes into the HEAD of the html file -->

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2005, Sandeep Gangadharan -->
<!-- For more free scripts go to http://www.sivamdesign.com/scripts/ -->
<!--
if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--></style>') }

function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }
// -->
</script>


And this is what the html looks like, which I've placed within a table (the list of businesses/pages I support or recommend):

<td width=[]>
<h2><u>[list name]</u></h2>


<p>
<a href="http://[link to business].com">[name]</a>
<br>
<div onClick="openClose('a3')" style="cursor:hand; cursorointer">&nabla;</div>
<div id="a1" class="texter"><font style="font-size:90%" color="maroon">
[hidden content]</font></p></div>

Is is possible for me to place some kind of code where I have the &nabla; that will switch between two icons when shown/hidden? Do I have to use a completely different script? Also, is it possible to keep both a link and a toggle icon on the same line without a break, yet have them lead to different places? Maybe this is more difficult than I think it should be, but I really cant find a good script on the internet for this. Any help would be appreciated. Thanks.

Hi everyone,

I have a set of "buttons" that expand/collapse information onClick, using Javascript that look like this...



Here is the CSS I used to create the look of the "buttons"...

Code:

div.btn_workshops {
	background-image: url(../images/btn_workshops_mid.gif);
	background-position: top left;
	background-repeat: repeat-x;
	cursor: pointer;
	height: 22px;
	margin-bottom: 1px;
	width: 330px;
}
div.btn_workshops_lt {
	background-image: url(../images/btn_workshops_lt.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%px;
}
div.btn_workshops_rt {
	background-image: url(../images/btn_workshops_rt.gif);
	background-position: 100% 0;
	background-repeat: no-repeat;
	height: 100%;
	padding: 3px 12px 0px 12px;
	width: 100%px;
}
.hide {
	display: none;
	visibility: hidden;
}
.show {
	display: block;
	visibility: visible;
}

Here is the HTML that contains the "buttons" and the text that will appear when you click on the "buttons" to expand them. Keep in mind that everything collapses when you click on any of the "buttons" a second time. This is done, using Javascript.

Code:

<div class="btn_workshops" onclick="expandWorkshops('workshop1');flipArrow('arrow1')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Basic Ceramics</span> - Jennifer Thompson
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow1" />
											</div>
										</div>
									</div>
                                    <div id="workshop1" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: October 9, 16, 23, and 30<br />
                                        Hours: 2:30pm - 5:30pm<br />
                                        Tuition: $250</p>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop2')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Head Drawing and Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow2" />
											</div>
										</div>
									</div>
                                    <div id="workshop2" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: 2/19, 2/26, 3/5, and 3/12<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $275
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop3')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Figure Drawing</span> - Tom Hampton
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow3" />
											</div>
										</div>
									</div>
                                    <div id="workshop3" class="hide">Instructor: Tom Hampton<br />
                                        Dates: August 7 and 14<br />
                                        Time: 9am - 4pm<br />
                                        Tuition: $150
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop4')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Photographing Portraits</span> - Susan Lilianas
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow4" />
											</div>
										</div>
									</div>
                                    <div id="workshop4" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: February 19 - April 23<br />
                                        Time: 6pm - 9pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop5')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Still Life Oil Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow5" />
											</div>
										</div>
									</div>
                                    <div id="workshop5" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: June 5, 12, 19, and 26<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>

Here is the JavaScript I used to create the expand/collapse effect...

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}

Here is my problem. I added the downward, red arrows to give users a "hint" that the "buttons" will do some action if you click on them. By default, I have the arrows facing down to show that information will appear below the "button." Then once a user has expanded a block of information, I want the downward, red arrow to change to an upward, red arrow. I currently have that working, but it is only working "one way." In other words, when you click on any one of the "buttons," the arrow does change, but it does not change back to the default when you click on a "button" a second time to collapse the information.

Here is what it looks like with one of the "buttons" expanded. As you can see, I was successfully able to change the downward arrow to an upward arrow after the information expanded below. This helps show that the text can collapse upward if you click on the "button" a second time. Again, my problem is I am unable to get the upward arrow to return to its default, downward arrow appearance.



This is what it currently looks like when you click on the "button" a second time to collapse the information. As you can see, my expand/collapse effect works, and the text goes away, but I am unable to get the upward arrow to change back to the default, downward arrow.



This is the function that I added to my JavaScript, which successfully changes the arrow from down to up onClick, but fails to return the arrow image to default when you click again.

Code:

function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

This is the full JavaScript that includes the expand/collapse effect and the unsuccessful swap arrow effect so you can everything together.

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}
function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

The flipArrow function I wrote is just my latest attempt. Believe me, I've tried all kinds of things, including "if else," "if else if," "if." I've tried Variables, getElementById, and switched out all different kinds of methods and ID's. No matter what, I can't seem to get any combination to work. Don't get me wrong. One of the previous methods I tried might have been the correct one, but I most likely did not write it correctly. I am no JavaScript expert at all. The code that I currently have was partly found on the Internet and partly modified by me after hours and hours of research and troubleshooting. I'm very proud that I was able to get this far, but I'm getting to the point where I am spending all day and night, every day, trying to figure this out. I always search forums before posting in them. This is probably the second time I've ever posted in a forum. I hope it helps. Sorry to ramble on. I just want to make sure you have as many details and samples as possible so I do not get any questions or confusion.

Thanks for your help!

Hi there guys, nive beiing a part of this forum, hope to have some help in a issue, many forums couldnt responde to me or guide me for a solution, i have a menu of a site, and i liked to when is clicked a submenu of a menu that gets expand the menu stays open. for examplo of you guys go to this site of mine

http://bonuccidesigns.cer33.com

And go to link "Services", and click in a submenu named Services1, the menu Services closes...i liked to do is when i click in submenu services1 the menu services stays open, could someone help me?

the code that gerantes the animation is "utils.js

Hope for some help guys

Be well

Greetings,

In a vertical expanding menu, I'm looking to change where the user clicks in order to expand the menu to the submenu. In short I want the user to be able to click on the parent menu item text and have that action expose the submenu children text items. Please see attached .png for visual.

At present, the user must click on an arrow icon next to the parent menu item text to expand, but I'd also like the parent menu item to expand showing its children when clicked. All the parent menu item does right now is call in the linked page; it does not expand the menu.

I've attached the .js in the 3 attached .txt files. Please let me know if there's anything else I should add/send.


As far as I can tell the name of the arrow being used to expand menu can be seen in this html...

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

<td class="wbtTdArrow" style="padding: 2px; border: 0px none;">
<a class="wbtArrowLink" title="Expand Welcome submenu" href="javascript:void(0)">
<img class="wbtArrowImg" src="images/collapse.png" alt="Expand Welcome submenu" style="width: 5px; height: 9px;">
</a>
</td>


Here's the html containing the name of the item I'd like to use in addition to the arrow...

<td class="wbtTdSelected">
<img src="images/spacer.gif" style="width: 0px; height: 0px;" alt="Selected menu item">
</td>

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

Hello Folks,

I installed a template on the following site and did not actually write the javascript dropdown menu seen at the top of http://sthomaslc.com/

The problem is that if parent list items Ministries and Parish Leadership have enough children, they expand out right off of the screen of low resolution setups.

I am totally new to javascipt programming so excuse my ignorance when I ask how to make the children items to expand out left instead of right if it's detected that the menu has hit the right side of the browser window.

Best Regards

David

Hey everyone. If you go he Code:

http://store.inspirationsdancewear.com/?xls_offlinekey=4888254

you will see an "accordion" navigation on the left side. It opens and contracts like it should, HOWEVER I need to add the following functionality.

1. I want to have ONLY 1 "parent" category displaying it's "child" categories at a time. So when I open another "parent" link, I want the previous one to collapse, so only 1 accordion is open at a time (right now you are able to open all of them without the other ones collapsing).

2. When I select a "child" category from the "parent" category, I need the menu to stay open when going to the "child" category page and I also need the relevant "child" category to be "highlighted" so the user knows which page they are on.

Please let me know if you can help me with any of this. I would GREATLY appreciate it!!

PHP Code:
<script type="text/javascript">
    //----------------------------NAVIGATION DROPDOWN------------------------------------//
sfHover = function() {
        var sfEls = document.getElementById("left").getElementsByTagName("h2");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    
function initMenu() {
          $('#left div').hide();
          $('#left h2').click(
            function() {
                $(this).next().slideToggle('normal');    
              }
            );
          }
        $(document).ready(function() {initMenu();});
        
</script>

<?php

function print_childs($categ){
    
    $childs = $categ->categ_childs;
    
    if(!$childs || (count($childs) == 0)){
        echo "</a>";
        return;
    }
        
        echo "&raquo;</a><ul>\n";
    foreach($childs as $category){
        
        if(!$category->HasChildOrProduct())
            continue;
        
        ?>
        
<li><a class="childcats" href="<?= $category->Link; ?>"><?= $category->Name; ?><?php print_childs($category); ?></a></li>
        <?php
        
    }
    echo "</ul><br/>\n";
    
    
}

?>
<div id="leftwrapper">

<h2 style="margin-top:-25px; padding-bottom:15px; color:#900; margin-left:15px; font-size:1.2em">Shop Online</h2>

        <div id="left">        
                    
<?php foreach($this->menu_categories as $category):  ?>    
<h2 class="headings"> <?= $category->Name; ?></h2>


<div>
<a class="childcats" href="<?= $category->Link; ?>">  See all <?= $category->Name; ?> <?php print_childs($category); ?></a>

                            
    </div>                        
                            
<?php endforeach; ?>
                    
<?php if(_xls_get_conf('ENABLE_FAMILIES', 1)): ?>                                
<?php $families = Family::LoadAll();?>
<?php foreach($families as $family): ?>
<a href="index.php?family=<?= $family->Family ?>"><?= $family->Family ?></a>
<?php endforeach; ?>
                                
                                
                        <?php endif; ?>
                        
        </div>                
    
        </div>