Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Hide / show divs - cut down my LONG code :-)

    HI

    Sorry to but into your forum but this seems like a good place to ask - hope you don't mind.


    I have a form with a simple DDL with numbers 1,2,3,4, etc.
    OnChange this displays certain hidden Divs.

    This works fine

    Bit I am looking for a way to cut down the load time.

    The code is fine for say 4 or even 8 hidden Div but what if I have (for example) 40 or 50.

    How can I cut this javascript down.

    Thanks for looking

    Jane


    If you load this into a blank page you'll see what I doing and how mad it will start to get with more hidden divs.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title></title>
    <script language="javascript" type="text/javascript">  
            function showdivs() { 
                var list = document.getElementById("<%=ddlrooms.ClientID%>"); 
                var chosenItemText = list.value; 
                if (chosenItemText == "4") { 
                    document.getElementById('MyDivNumber1').style.display = 'inline'; 
                    document.getElementById('MyDivNumber2').style.display = 'inline';                 
                    document.getElementById('MyDivNumber3').style.display = 'inline';  
                    document.getElementById('MyDivNumber4').style.display = 'inline';                  
    ;                 
                } 
    else if (chosenItemText == "3") { 
                    document.getElementById('MyDivNumber1').style.display = 'inline'; 
                    document.getElementById('MyDivNumber2').style.display = 'inline';                 
                    document.getElementById('MyDivNumber3').style.display = 'inline';  
                    document.getElementById('MyDivNumber4').style.display = 'none';                   
                } 
    else if (chosenItemText == "2") { 
                    document.getElementById('MyDivNumber1').style.display = 'inline'; 
                    document.getElementById('MyDivNumber2').style.display = 'inline';                 
                    document.getElementById('MyDivNumber3').style.display = 'none';  
                    document.getElementById('MyDivNumber4').style.display = 'none';                                
                } 
    else if (chosenItemText == "1") { 
                    document.getElementById('MyDivNumber1').style.display = 'inline'; 
                    document.getElementById('MyDivNumber2').style.display = 'none';                 
                    document.getElementById('MyDivNumber3').style.display = 'none';  
                    document.getElementById('MyDivNumber4').style.display = 'none';                                  
                } 
                
     else if (chosenItemText == "Select") { 
                    document.getElementById('MyDivNumber1').style.display = 'none'; 
                    document.getElementById('MyDivNumber2').style.display = 'none';                 
                    document.getElementById('MyDivNumber3').style.display = 'none';  
                    document.getElementById('MyDivNumber4').style.display = 'none';  
            } 
            }         
        </script>
    </head>
    
    <body>
    
    <form id="MyForm" runat="server">
    	Please select a number
    	<asp:DropDownList id="ddlrooms" runat="server" onchange="showdivs();">
    		<asp:listitem></asp:listitem>
    		<asp:listitem>1</asp:listitem>
    		<asp:listitem>2</asp:listitem>
    		<asp:listitem>3</asp:listitem>
    		<asp:listitem>4</asp:listitem>
    	</asp:DropDownList>
    	<br />
    	<br />
    	<div id="MyDivNumber1" style="display: none">
    		Hi, I'm Div Number 1<div>
    			<br />
    			<div id="MyDivNumber2" style="display: none">
    				Hi, I'm Div Number 2<div>
    					<br />
    					<div id="MyDivNumber3" style="display: none">
    						Hi, I'm Div Number 3<div>
    							<br />
    							<div id="MyDivNumber4" style="display: none">
    								Hi, I'm Div Number 4<div>
    								</div>
    							</div>
    							<br />
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </form>
    
    </body>
    
    </html>
    Last edited by VIPStephan; 11-30-2012 at 11:20 AM. Reason: corrected code BB tags

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,243
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Try this:-

    Code:
    <html>
    <head>
    </head>
    <body>
    
    <form id="myForm" >
    
    <select id = "mylist" onchange = "showdivs()">
    <option value = 0>Please select a number...</option>
    <option value = 1>1</option>
    <option value = 2>2</option>
    <option value = 3>3</option>
    <option value = 4>4</option>
    </select>
    <br><br>	
    
    <div id="MyDivNumber1" style="display: none">	Hi, I'm Div Number 1</div><br>
    <div id="MyDivNumber2" style="display: none">	Hi, I'm Div Number 2</div><br>
    <div id="MyDivNumber3" style="display: none">	Hi, I'm Div Number 3</div><br>
    <div id="MyDivNumber4" style="display: none">	Hi, I'm Div Number 4</div><br>
    
    </form>
    
    
    <script type = "text/javascript">
    
    function showdivs() {
    var numdivs = 4;  // number of divs - could be 50 or as many as you like
    var num = document.getElementById("mylist").value;
    for (var i =1; i<=numdivs; i++) {
    var which = "MyDivNumber" + i;  // naming convention for div ids
    document.getElementById(which).style.display = num>=i? "block" : "none";
    }
    }
    
    </script>

    A <div> is a block level element, not inline.

    Lady Astor said to Winston Churchill "If I was married to you, I would put poison in your whisky".
    To which Churchill replied "If I was married to you, I would drink it".
    Last edited by Philip M; 11-30-2012 at 03:38 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    janehollin (11-30-2012)

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you

    It works really well


  •  

    Posting Permissions

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