Question

I am using the following code to highlight the div of the text box that the user has clicked on. My problem is that i have mulitple divs and textboxes which need to highlight when clicked on but if you click on one textbox all the divs highlight. When they should highlight one at a time (when clicked).

.aspx code

    <div class="divSurname" runat="server">
                          <div id ="divLastName" class="on">

                                 <asp:TextBox class="resizedTextbox" ID="txtSurname" onfocus="ChangeStyle(this);" onblur="ToggleStyle(this);"  runat="server"></asp:TextBox>
                                 <asp:CustomValidator ID="cvSurname" runat="server" ValidateEmptyText="true" ControlToValidate="txtSurname" ErrorMessage="Please enter your Surname name." Display="Dynamic" OnServerValidate="cvSurname_ServerValidate" />

                           </div> 

                     </div>   

and similar code for Firstname postcode etc..

javascript

 <script type="text/javascript">
                         function ToggleStyle(ctrl) {
                             (document.getElementById('divLastName')).className = "on";
                             (document.getElementById('divStartName')).className = "on";
                             (document.getElementById('divDateOfBirth')).className = "on";
                             (document.getElementById('divClientPostcode')).className = "on";
                         }
                         function ChangeStyle(ctrl) {
                             (document.getElementById('divLastName')).className = "off";
                             (document.getElementById('divStartName')).className = "off";
                             (document.getElementById('divDateOfBirth')).className = "off";
                             (document.getElementById('divClientPostcode')).className = "off";
                         } 
                    </script>

Css

    #divLastName.on 
    { 
        background-color: #fff5cc; 
    } 
    #divLastName.on:hover 
    { 
        background-color: #fcd619; 
    } 
    #divLastName.off 
    { 
        background-color: #fcd619; 
    } 


    #divStartName.on 
    { 
       background-color: #fff5cc; 
     } 
     #divStartName.on:hover 
      { 
       background-color: #fcd619; 
       } 
       #divStartName.off 
        { 
          background-color: #fcd619; 
         } 

        #divDateOfBirth.on 
        { 
          background-color: #fff5cc; 
           } 
         #divDateOfBirth.on:hover 
           { 
            background-color: #fcd619; 
           } 
           #divDateOfBirth.off 
          { 
            background-color: #fcd619; 
              } 

           #divClientPostcode.on 
            { 
             background-color: #fff5cc; 
             } 
              #divClientPostcode.on:hover 
              {  
               background-color: #fcd619; 
                 } 
                  #divClientPostcode.off 
                { 
                  background-color: #fcd619; 
                   } 

Thanks in advance for any help!

Answer 1

Based on your java-script code it looks like you are using a function that when executing is highlight the whole bunch of div instead of using it like this you can write a function or send a value to a function that would highlight the div you want.

        function ToggleStyle(ctrl) {
         (document.getElementById(ctrl)).className = "on";
        }

        html part

        <div id="divLastName">

    <asp:TextBox class="resizedTextbox" ID="txtSurname" onfocus="ChangeStyle(this);" onblur="ToggleStyle('divLastName')"  runat="server"></asp:TextBox>

</div>