www.webdeveloper.com
Results 1 to 2 of 2

Thread: Deadline looming, please help. How do I incorporate javascript into this HTML?

  1. #1
    Join Date
    Jan 2009
    Posts
    1

    Exclamation Deadline looming, please help. How do I incorporate javascript into this HTML?

    I really need to use some Javascript to make my site more user friendly, because right now, while simple, it's horrendously cluttered. So far it's programmed entirely in HTML as my Javascripting skills are almost nonexistent. I have some programming experience (enough to understand a few things), but not enough to write the code for this.

    Here's a basic set-up:
    <html><head></head><body>

    Category 1: <a href="#">+</a>/<a href="#">-</a>

    <br><br>

    <select name="menu1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>

    <br><br>

    <select name="menu2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>

    </body></html>

    Can someone PLEASE help me rewrite this so that both menus are hidden, and clicking on ' + ' makes menu1 visible, or menu2 if menu1 is already visible, and clicking on ' - ' makes menu2 hidden (or menu1 if menu2 is already hidden). Basically so that ' + ' makes them visible, top to bottom, and ' - ' hides them, bottom to top.

    And can you please explain what the script is doing? [I need to do this for at least five menus in at least ten different categories, so I'll need to be able to edit it, or at least copy and paste it]
    Thank you so much!

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    This should be pretty much self explanatory, but if not let me know:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript">
    
    function showHide(func) {
    if (func == "+"){
    	if(document.getElementById("menu1").style.display=="none")
    		document.getElementById("menu1").style.display="inline";
    	else //no need to test menu2  because displaying the element if it's already displayed doesn't hurt
    		document.getElementById("menu2").style.display="inline";
    } else { // reverse the order to hide menu2 before hiding menu 1
    	if(document.getElementById("menu2").style.display=="inline")
    		document.getElementById("menu2").style.display="none";
    	else //no need to test menu1 because hiding the element if it's already hidden doesn't hurt
    		document.getElementById("menu1").style.display="none";
    }
    
    }
    </script>
    </head>
    
    <body>
    
    Category 1: <a href="#" onclick="showHide('+')">+</a>/<a href="#" onclick="showHide('-')">-</a>
    
    <br><br>
    
    <select name="menu1" id="menu1" style="display:none">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    
    <br><br>
    
    <select name="menu2" id="menu2" style="display:none">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    
    </body></html>
    54 68 65 42 65 61 72 4D 61 79

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles