Home/ Questions/Q 6895361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:53:56+00:00

How can I get the label to toggle show/hide? Below is my code and

  • 0

How can I get the label to toggle show/hide? Below is my code and currently it is also displaying show. I would like it to toggle from show to hide and from hide back to show. when show is displayed the div will be hidden but when show is clicked the label will switch to hide and the div will be displayed and when hide is clicked the label will go back to show and the div will be hidden

  <html>
 <head>
<title>jQuery test page</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
 $("#textBox").toggle();
});
});
</script>
</head>
<body>
<label id="clickMe">Show</label>
<br />
<div id="textBox" style="display: none">This text will be toggled</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I read your question right, then I think the following would work:

    $('#clickMe').toggle(
            function(){
                $('#textBox').show();
                $('#clickMe').text('hide');
            },
            function(){
                $('#textBox').hide();
                $('#clickMe').text('show');
            });

    JS Fiddle demo.

    If you use the attribute for, to define the element to which the label ‘connects’, and also use class-names, then this can be made more generic and useful:

    $('.clickMe').toggle(
            function(){
                $('#' + $(this).attr('for')).show();
                $(this).text('hide');
            },
            function(){
                $('#' + $(this).attr('for')).hide();
                $(this).text('show');
            });

    JS Fiddle demo.

    Bear in mind, though, that the label element is used to associate information with specific input elements, as opposed to a generic identifier for arbitrary elements. Ideally, you should use a span, or div, element rather than a label for this purpose.

    If you do switch to using non-label elements, then the for attribute shouldn’t be used either, in its place I’d suggest (assuming the same connection between what’s currently the label and the div) using a custom data-* attribute (such as data-for) to identify the relationship.

    Note, also, in the above -final- example, the use of the class instead of the id selector, since an id must be unique within the document.

    • 0