javascript - How do I make a div hide onclick and make it show when it's clicked again? - Stack Overflow

admin管理员组

文章数量:1428944

I have this code:

<script>
(function ($) {
    $(document).ready(function () {
        $("#thisclick, #thisclick2").click(function () {
            if ($('.example').is(":hidden")) {
                $(this).html($(this).html().replace(/Hide/, 'Show'));
            } else {
                $(this).html($(this).html().replace(/Show/, 'Hide'));
            }
            // Do it afterwards as the operation is async
            $(".example").hide();
        });
    });
})(jQuery);
</script>

The way the current code works is that if #thisclick is clicked it hides #example. Which is what I require but when #thisclick is clicked again i want it to show #example. Using the above code, it won't work. What must I do to achieve this?

I have this code:

<script>
(function ($) {
    $(document).ready(function () {
        $("#thisclick, #thisclick2").click(function () {
            if ($('.example').is(":hidden")) {
                $(this).html($(this).html().replace(/Hide/, 'Show'));
            } else {
                $(this).html($(this).html().replace(/Show/, 'Hide'));
            }
            // Do it afterwards as the operation is async
            $(".example").hide();
        });
    });
})(jQuery);
</script>

The way the current code works is that if #thisclick is clicked it hides #example. Which is what I require but when #thisclick is clicked again i want it to show #example. Using the above code, it won't work. What must I do to achieve this?

• javascript
• jquery
• if-statement
• document-ready

Share Improve this question Follow edited Apr 1, 2013 at 13:31 Naveen 6,9361010 gold badges4141 silver badges8585 bronze badges asked Apr 1, 2013 at 12:25 starbucksstarbucks 3,0161010 gold badges4343 silver badges5353 bronze badges 4

• use JQuery .hide() and JQuery .show(). – Vucko Commented Apr 1, 2013 at 12:28
• If I understand you correctly, you have $('#thisclick').slideToggle('slow'); instead of $('#example').slideToggle('slow');. – Kyle Commented Apr 1, 2013 at 12:28
• @kyle, I am sorry, I posted the old code. I updated my question with the one I am currently using. – starbucks Commented Apr 1, 2013 at 12:31
• @JeffShaver He is trying to hide an element after clicking on a different element. – Kyle Commented Apr 1, 2013 at 12:37

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You should be able to change your code to as follows to get it to work:

(function ($) {
    $(document).ready(function() {
    $("#thisclick").click(function () {
        $("#example").slideToggle("slow");
        });
    });
})(jQuery);

Here is a link to a quick sample: http://jsfiddle/andyjmeyers/szmXp/

Are you expecting like

<button>This click</button>
<p style="display: none">Example</p>

<script>
$("button").click(function () {
$("p").toggle();
});
</script>

Please check it on http://jsfiddle/X5r8r/1107/

<script>
    (function ($) {
          $(document).ready(function() {
          $("#thisclick").click(function () {
             if ($('#example').is(":hidden")) {
                 $(this).html($(this).html().replace(/Hide/, 'Show'));

             } else {
                 $(this).html($(this).html().replace(/Show/, 'Hide'));
             }
             // Do it afterwards as the operation is async
             $("#thisclick").slideToggle("slow");
             if($("#example").attr("isHidden") == "1")
                  $("#example").slideToggle("slow");
             $("#example").attr("isHidden","1");
          });
      });
        })(jQuery);
        </script>

You can do this:

$("#thisclick").click(function () {
   if ($('#example').hasClass("hidden"))
   {
      $('#example').removeClass("hidden");
      $('#example').show();
   }
   else
   {
      $('#example').addClass("hidden");
   }
}

or more easily:

$("#thisclick").click(function () {
   $('#example').toggleClass("hidden");
}

define style":

.hidden
 { display:none;}

本文标签： javascriptHow do I make a div hide onclick and make it show when it39s clicked againStack Overflow