Using dropdown to decide function to use.

[m_coomer146]

1) Script Title: Contractible Headers Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

3) Describe problem: i am trying to figure out how to use a dropdown box to decide which function to select.

the functions are:

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

html:

<select name="selectBox" size="3" >
<option value="1" onclick="contractcontent('sc1')" SELECTED>value1</option>
<option value="2"onclick="expandcontent('sc1')" >value2</option>
<option value="3"onclick="expandcontent('sc1')" >value3</option></select>

<div id="sc1" class="switchcontent">
<label>Price:</label><textarea name="swdollars" rows="1" columns="1"></textarea></div>

When i asign the onclick command to the individual options it doesnt work. Like above.

<select name="selectBox" size="3" onclick="expandcontent('sc1')">
<option value="1" SELECTED>value1</option>
<option>value2</option>
<option>value3</option></select>

When i asign the onclick command to the selectbox (above) it will work but it if choose value 1 it shows the content and if i click value 2 it will close the content. if i choose value 1 it shows the content but if i click value 1 again it closes the content.

This will eventially end up in an asp.net page. I know i have to write a function to decide which function to use but i have no idea how. Can someone help me?

[ddadmin]

Well, if you're talking about the straightforward expand or collapse a particular header's content based on the value selected in a SELECT menu, you shouldn't use expandone() and contractone(), which are internal functions that behave a little differently than a straightfoward expand/ collapse. Just implement a SELECT menu with code that grabs the currently selected OPTION's value, with that value reflecting the ID of the content in question, then use standard JavaScript to expand/ collapse that content. See the below full example:

<script type="text/javascript">

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function forceexpandcontent(cid){
if (typeof ccollect!="undefined")
document.getElementById(cid).style.display="block"
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0" 
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>

<body>

<select name="selectBox" size="4" onClick="var svalue=this.options[this.selectedIndex].value; if (svalue!='nothing') document.getElementById(svalue).style.display='block'">
<option value="nothing" SELECTED>Choose a header to expand</option>
<option value="sc1">Expand 1st header</option>
<option value="sc2">Expand 2nd header</option>
<option value="sc3">Expand 3rd header</option>
</select>

<select name="selectBox" size="4" onClick="var svalue=this.options[this.selectedIndex].value; if (svalue!='nothing') document.getElementById(svalue).style.display='none'">
<option value="nothing" SELECTED>Choose a header to contract</option>
<option value="sc1">Collapse 1st header</option>
<option value="sc2">Collapse 2nd header</option>
<option value="sc3">Collapse 3rd header</option>
</select>

<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is JavaScript?</h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">Difference betwen Java & JavaScript?</h3>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>

<h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer">What is DHTML?</h3>
<div id="sc3" class="switchcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>

[m_coomer146]

i was looking at the script you recommended above, and that is kind of what i am looking for except all in one listbox. if the user clicks the second and third option then the panel extends and if the user clicks the first option it contracts.

<select name="selectBox" size="4" onClick="var svalue=this.options[this.selectedIndex].value; if (svalue!='nothing') document.getElementById(svalue).style.display='block'">
<option value="nothing" SELECTED>Choose a header to expand</option>
<option value="sc1">Contract 1st header</option>
<option value="sc2">Expand 2nd header</option>
<option value="sc3">Expand 3rd header</option>
</select>