<script> function toggleSlide(objname){ if(document.getElementById(objname).style.display == "none"){ slidedown(objname); } else{ slideup(objname); } } </script> <button onclick="toggleSlide('mydiv3');">Watch Video</button> <select onchange="toggleSlide(this.options[this.selectedIndex].value)" id="id"> <option value="mydiv3">mydiv3</option> <option value="mydiv4">mydiv4</option> </select> Works fine just like I want it to. It causes the <div id="mydiv3"></div> appear/disappear when you click on mydiv3 and same with mydiv4. However I want it so when you click on mydiv4 and mydiv3 is already open it closes it. I know how to do that but I am going to be adding in hundreds of these and I want it to close any open ones when you open a new one.
may be i would have done it like this: <select onchange="changeTo(this)">...</select> HTML: <script> var changeTo = function( selElement ) { selElement.getChildren().each( function(el, i, ar) { if ( !el.selected && document.getElementById( el.textContent ).hasClass("open") { document.getElementById( el.textContent ).removeClass( "open" ); slideUp( document.getElementById( el.textContent ) ); } else if ( el.selected && !document.getElementById(el.textContent).hasClass("open")) { slideDown( document.getElementById( el.textContent ) ); } } ); }; </script> Code (markup): Note: For the ease of writing, I use shorthand code resembling mootools framework, to iterate the items in the array, like array.each( function( element, index, array ) { // process code } ); Code (markup):
i took a stab at it - the hardest part was figuring out exactly what you want, as you have no "div id="mydiv3" " (?) i am assuming that you have containers ( divs, tags, etc) that have the content you want to appear and disappear depending on which one is selected from the drop down selection ? and any one which is open will close, before the new one will open? if so, i reworked this a little bit to work in that manner. there is a working sample here: demetri-media.com/JavaScript/myDiv.html i used input buttons for the 3 objects. they all have the same class, so we can turn off their visibility at one time. they each have a unique id, which is he same as the value for the select button options. having the id names in an array, we can now each time the selection changes, the for loop clsoes all the boxes, and then the function continues, and opens the correct box. hope this helps i was unclear and maybe i have this backwards- do you want each of the "Watch Video" divs to be clickable? all this is very possible - if you clarify what you want to happen, we can work it out. <html> <head> <style type="text/css"> .but {visibility:hidden; } </style> <script type="text/javascript"> var arr=["mydiv3", "mydiv4", "mydiv5" ]; function toggleSlide(objname){ var i=0; for(i=0;i<3;i++){ document.getElementById(arr[i]).style.visibility="hidden"; } document.getElementById(""+objname+"").style.visibility="visible"; } </script> </head> <body> <input type="button" class="but" id="mydiv3" value=" Watch Video 3 "/> <input type="button" class="but" id="mydiv4" value=" Watch Video 4 "/> <input type="button" class="but" id="mydiv5" value=" Watch Video 5 "/> <select name="id" id="id" onchange="toggleSlide(this.options[this.selectedIndex].value)"> <option value="mydiv3">mydiv3</option> <option value="mydiv4">mydiv4</option> <option value="mydiv5">mydiv5</option> </select> </body> </html> Code (markup):
your welcome. my pleasure. i take it did understand what you wanted and you were able to modify it for your needs.