JavaScript - How Do I Expand A Menu Option And Collapse It When Another Menu Option Is Clicked?

Tonight is one of those nights - which seem to be coming more often - where I just can't seem to do anything right.

Here is the menu I'm using embedded in HTML:

Code:

<td width="40%" align="center"><font color="#000099"><b>
<select id="Aircraft">
 <option value="0">N148LH</option>
 <option value="1">N149LH</option>
 <option value="2">N150LH</option>
 <option value="3">N151LH</option>
 <option value="4">N152LH</option>
 <option value="5">N153LH</option>
 <option value="6">N155LH</option>
 <option value="7">N156LH</option>
 <option value="8">N157LH</option>
 <option value="9">N159LH</option>
 <option value="10">N162LH</option>
 <option value="11">N163LH</option>
</select></b></font></td>

Now I want to use that code to trigger default values for my Empty Weights. This is what I have and isn't working:

Code:

  

  var selectmenu=document.getElementById("Aircraft")
  
  if (Aircraft=0) {
  df.ew.value = 1569.41;
  df.ew_mom.value = 135909.2;
  }
  
  if (Aircraft=1) {
  df.ew.value = 1570.11;
  df.ew_mom.value = 135929.76;
  }

Any help is appreciated. If anyone is interested the page this is on is here.

hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat".


thanks!!

This is hopefully my last jquery question. I have a slight issue with my buttons and dropdown menu. What happens is lets say user chooses option type "ABCDE" in first dropdown menu and then second dropdown menu chooses the value "4" for the number of answers and then clicks on the buttons "A","B","C" and "E", well if the user then decides to change the option type to "ABC", the buttons "A", "B" and "C" are still selected from the last time they have been selected.

What I want is that if the Option Type (OptionDropId) changes, then buttons selected is refreshed so no buttons are selected from the last time they have been selected.

This did used to work but when I included my change() event handler in my code which I need, the buttons do not refresh whenever a new dropdown option (OptionDropId) is selected. So I think the edit of the code may need to happen in the code below:

Code:

             $(document).ready(function ()
        {
            var OptDrop = new Array();
    
    OptDrop.abc = ["",1,2];
    OptDrop.abcd = ["",1,2,3];
    OptDrop.abcde = ["",1,2,3,4];
    OptDrop.trueorfalse = [1];
    OptDrop.yesorno = [1];
            
            $("#optionDropId").change(function ()
            {
                var selectedValue = $(this).val();
                $("#numberDropId").html("");
                $.each(OptDrop[selectedValue], function (x, y)
                {
                    $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
                });
            }); 
    
            $("#optionDropId").change();
        });

My code is in JSfiddle, (the second dropdown menu and buttons may not appear in JSFiddle but the code does work properly, I feel it is better displaying code in JSfiddle then in my questions as it will take up a lot of space. If you want to see working version then post code in your web document and it should work).

My Code: [click below][1]


[1]: http://jsfiddle.net/XZ7um/10/

Hi People,

I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick.

The working link can be found at
www.atomwhale.com/share/clients/branch/website/home.html

Hope someone can help me in getting this to work.

thanks,
Jeriel.

have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I cannot use the title attribute option as its not compatible with my web browser

I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out.

Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.

Here's the code I've got for the Javascript:
Code:

function typeoflisting() {

	var selectform = document.getElementById('propertytype');
	
	if (selectform.options[selectedIndex].value == "sell") {
		document.getElementById('per_week').style.display = 'none';
		document.getElementById('bond').style.display = 'none';
	}
	else {
		document.getElementById('per_week').style.display = 'block';
		document.getElementById('bond').style.display = 'block';
	}	
}

Here's the <select> form:
Code:

<select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()">	
	<option value="lease">I'd like to lease a property to tenants</option>
	<option value="sell">I'd like to sell a property</option>
	<option value="share">I'd like to share a property</option>
</select>

And here's the first div I'm attempting to hide:
Code:

<div id="per_week" style="float: left;"> per week</div>

And the second div I'm attempting to hide:
Code:

<div style="float: left; padding: 20px 20px 0px 0px;" id="bond">
<h3>Bond</h3>
<input type="text" class="text" value="$"/>
</div>

Could anyone please tell me what I'm doing wrong?

I have a scenario where I show a drop-down-with-few-items in a JSP page, to the user.
The length of few options in the drop down is greater than that of the drop down's, hence our requirement is to show the hovered (not selected) option as tooltip for user's convenience. I am not able to use title attribute for displaying tooltips in my browser.
Now the code in http://dossett.org/11/No_onmouseover_for_options_in_IE/
implements a tooltip for multiple select drop down menu.Can you modify the code for single select

Hello everyone, I am just learning the basics of javascript, and am finding myself stuck. Any help is greatly appreciated.

So, I'm using the below javascript for expand / collapse text, it suffices well. However it will only collapse either table rows, or table data cells. Now, I know that these tags

Code:

 
{var trs = table.getElementsByTagName('tr');
{var a = trs[i].getElementsByTagName('td')
 

Make the rows / data cells expand. However, I cannot seem to make it work on headers.

To be lucid, I would like to know what I have to add, or edit to make the below code expand table headers (<th>), and perhaps div tags. The full javascript is thus :

Code:

 
window.onload = function()
{
var table = document.getElementById('stjorn');
if (table)
{
var trs = table.getElementsByTagName('tr');
for(var i = 0; i < trs.length; i++) 
{
var a = trs[i].getElementsByTagName('td')[0].getElementsByTagName('a')[0];
a.onclick = function()
{
var span = this.parentNode.getElementsByTagName('span')[0];
span.style.display = span.style.display == 'none' ? 'block' : 'none';
this.firstChild.nodeValue = span.style.display == 'none' ? 'More' : 'Less';};
}
}
};
 

Thank you for your time.

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

Hi,

Please find the attached HTML Source Code. I was able to achieve Collapsing/Expand at Project Level but not at the vendor level. However, same HTML works fine with IE 8 and FF. The Expand/Collapse at the Vendor Level fails with XHMTL Strict 1.0 and IE 7.

Can any one please help?

Thanks

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

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