Toggle the visibility of a div by clicking on a label

Question

Toggle the visibility of a div by clicking on a label

I am working with three unique labels, each with different ids and three distinct divs also with different ids.

<asp:Label ID="CA" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="var b = ChangeColorCA(); this.style.cursor='pointer'; return b" onmouseout="RemoveColorCA()"></asp:Label>&nbsp;

Here is the respective div code for each label:

<div id="DIV_CA" runat=server align="center" visible="false" style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto;">Some data</div>

I am looking to create a toggle function where clicking on a label will show its corresponding div while hiding the others. I am wondering if anyone can guide me on how to achieve this.

Update: Below is the script code I have been working with:

<script type="text/javascript">
  function hideshow(span) {
    var div = document.getElementById("DIV_" + span.id);
    if (div.style.display == "none")
       div.style.display = "block";
    else
       div.style.display = "none";
    }
</script>

And here is the updated label code I am using:

<asp:Label ID="CA" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="var b = ChangeColorCA(); this.style.cursor='pointer'; return b" onmouseout="RemoveColorCA()" onclick="hideshow(this)"  ></asp:Label>&nbsp;

javascript asp.net

Answer 1

Answer №1

If you have the knowledge of writing JavaScript languages.

Here is the breakdown:

<asp:Label ID="CA" 
               runat="server"
               onclick="hideshow(this)"
               Text="Label">
</asp:Label>
<div id="DIV_CA" 
     runat=server 
     align="center"  
     style="background-color:#f3f3f3; text-align:
            left; width: 500px; height: 470px; overflow:auto; display:none;">
         Some data
</div>

If you want to manipulate JavaScript:

 function hideshow(span) {
    var div = document.getElementById("DIV_" + span.id);
    if (div.style.display == "none")
       div.style.display = "block";
    else
       div.style.display = "none";
    }

EDIT: To hide all divs and show a specific div.

Breakdown: Place all <asp:Label/> and <div> inside another <div/>

 <div id="allDiv">
        <asp:Label ID="CA" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="this.style.cursor='pointer'; "   onclick="hideshow(this)"></asp:Label>
        <asp:Label ID="CB" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="this.style.cursor='pointer'; "   onclick="hideshow(this)"></asp:Label>
        <div id="DIV_CA" runat="server" align="center"  style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto; display:none;">Some data1</div>
        <div id="DIV_CB" runat="server" align="center"  style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto; display:none;">Some data2</div>
</div>

JavaScript: function hideDiv() set display:none to all child div.

<script type="text/javascript">
    function hideshow(span) {
        hideDiv();
        span.style.fontWeight = "bold";
        var div = document.getElementById("DIV_" + span.id);
        if (div.style.display == "none")
            div.style.display = "block";
        else
            div.style.display = "none"; 
    }
    function hideDiv() {
        var childDiv = document.getElementById("allDiv").childNodes;
        for (i = 0; i < childDiv.length; i++) {
            if (childDiv[i].tagName == "DIV") {
                childDiv[i].style.display = "none";
            }
            if (childDiv[i].tagName == "SPAN") {
                childDiv[i].style.fontWeight = "normal";
            }
        }
    }
</script>

Answer 2

If you have the knowledge of writing JavaScript languages.

Here is the breakdown:

<asp:Label ID="CA" 
               runat="server"
               onclick="hideshow(this)"
               Text="Label">
</asp:Label>
<div id="DIV_CA" 
     runat=server 
     align="center"  
     style="background-color:#f3f3f3; text-align:
            left; width: 500px; height: 470px; overflow:auto; display:none;">
         Some data
</div>

If you want to manipulate JavaScript:

 function hideshow(span) {
    var div = document.getElementById("DIV_" + span.id);
    if (div.style.display == "none")
       div.style.display = "block";
    else
       div.style.display = "none";
    }

EDIT: To hide all divs and show a specific div.

Breakdown: Place all <asp:Label/> and <div> inside another <div/>

 <div id="allDiv">
        <asp:Label ID="CA" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="this.style.cursor='pointer'; "   onclick="hideshow(this)"></asp:Label>
        <asp:Label ID="CB" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="this.style.cursor='pointer'; "   onclick="hideshow(this)"></asp:Label>
        <div id="DIV_CA" runat="server" align="center"  style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto; display:none;">Some data1</div>
        <div id="DIV_CB" runat="server" align="center"  style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto; display:none;">Some data2</div>
</div>

JavaScript: function hideDiv() set display:none to all child div.

<script type="text/javascript">
    function hideshow(span) {
        hideDiv();
        span.style.fontWeight = "bold";
        var div = document.getElementById("DIV_" + span.id);
        if (div.style.display == "none")
            div.style.display = "block";
        else
            div.style.display = "none"; 
    }
    function hideDiv() {
        var childDiv = document.getElementById("allDiv").childNodes;
        for (i = 0; i < childDiv.length; i++) {
            if (childDiv[i].tagName == "DIV") {
                childDiv[i].style.display = "none";
            }
            if (childDiv[i].tagName == "SPAN") {
                childDiv[i].style.fontWeight = "normal";
            }
        }
    }
</script>

Answer 3

Answer №2

Here is a JQuery example to achieve the desired functionality:

$("#<%= CA.ClientID %>").click(function(){

    $("#<%= DIV_CA.ClientID %>").toggle();

});

Answer 4

Here is a JQuery example to achieve the desired functionality:

$("#<%= CA.ClientID %>").click(function(){

    $("#<%= DIV_CA.ClientID %>").toggle();

});

Answer 5

Answer №3

1) Start by creating two CSS classes: divClass and divVisible. The former applies to all divs, while the latter is specifically for the visible div.

2) Next, set up an OnClientClick event on the Label(s) that references a JavaScript function called showHideDiv.

3) Within the showHideDiv function, the script hides all divs with the divVisible class and identifies the correct div to display based on the Label ID.

function showHideDiv(el)
{
  var id = el.getAttribute('id');
  var div = document.getElementById('DIV_' + id);
  var hideVisibleDiv = document.getElementsByClassName('divVisible');

  for(var e in hideVisibleDiv)
  {
    hideVisibleDivs[e].className = 'divClass';
  }
  div.className = 'divClass divVisible';
}

These steps should help achieve the desired functionality...

Answer 6

1) Start by creating two CSS classes: divClass and divVisible. The former applies to all divs, while the latter is specifically for the visible div.

2) Next, set up an OnClientClick event on the Label(s) that references a JavaScript function called showHideDiv.

3) Within the showHideDiv function, the script hides all divs with the divVisible class and identifies the correct div to display based on the Label ID.

function showHideDiv(el)
{
  var id = el.getAttribute('id');
  var div = document.getElementById('DIV_' + id);
  var hideVisibleDiv = document.getElementsByClassName('divVisible');

  for(var e in hideVisibleDiv)
  {
    hideVisibleDivs[e].className = 'divClass';
  }
  div.className = 'divClass divVisible';
}

These steps should help achieve the desired functionality...

Answer 7

Answer №4

Everything is set up perfectly:

<input type="text" placeholder="Enter your name" name="name" id="name"><br/>
<input type="email" placeholder="Enter your email" name="email" id="email"><br/>
<textarea placeholder="Enter your message" name="message" id="message"></textarea>

<input type="submit" value="Submit" id="submit">

<script type="text/javascript">
    $("#submit").click(function () {
        var name = $("#name").val();
        var email = $("#email").val();
        var message = $("#message").val();

        // Perform validation and submit form
    });
</script>

Answer 8

Everything is set up perfectly:

<input type="text" placeholder="Enter your name" name="name" id="name"><br/>
<input type="email" placeholder="Enter your email" name="email" id="email"><br/>
<textarea placeholder="Enter your message" name="message" id="message"></textarea>

<input type="submit" value="Submit" id="submit">

<script type="text/javascript">
    $("#submit").click(function () {
        var name = $("#name").val();
        var email = $("#email").val();
        var message = $("#message").val();

        // Perform validation and submit form
    });
</script>

Answer 9

Answer №5

To ensure your JavaScript code runs after using an update panel on your page, make sure to include the following snippet:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AsyncPostback);
function AsyncPostback() { //insert your code here };
This will prevent your JavaScript code from failing to execute after a postback.
Best of luck!

Answer 10

To ensure your JavaScript code runs after using an update panel on your page, make sure to include the following snippet:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AsyncPostback);
function AsyncPostback() { //insert your code here };
This will prevent your JavaScript code from failing to execute after a postback.
Best of luck!

Toggle the visibility of a div by clicking on a label

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to link this interval service with a view component?

Executing a JavaScript function using document.write()

javascript - data needed

React Intersection Observer Triggering Memory Leaks

Adding JavaScript code to Rails erb snippets

Php/JavaScript Error: Identifier Not Found

Can I apply a universal babel configuration across all of my personal projects?

Do not proceed if the process has encountered a failure

using post request axios to send parameters

Obtaining the current date and time of the user's browser within a server-rendered file

Tips for adjusting the cursor position in a textBox when a button is clicked using c#:

Core Entity Framework with Identity implemented across multiple projects

Challenges encountered during the execution of React tests: Enzyme, Jest, and React integration

What's the most effective method for looping through a substantial array in order to save data into SQLite using Node.js?

Is it possible to incorporate a label within a dropdown menu (<select>)?

I could use some assistance with iterating through an array that is passed as a parameter to a function

How big is the array size in the WebAudio API data?

Reactivity in Vue.js powered by ES6 classes

What is the best way to manage DOM modifications in a responsive design layout?

There is an abundance of brief PHP documents