How do I open a div then close it again with a changing text button_问答_开发者

How do I open a div then close it again with a changing text button

开发者 https://www.devze.com 2023-04-06 04:46 出处：网络

How can I expand a hidden on pa开发者_运维知识库ge load div from a link saying \"Show info\" but when the link has been clicked and the information was displaying the link text would change to \"Hide

相关专题：jquery

How can I expand a hidden on pa开发者_运维知识库ge load div from a link saying "Show info" but when the link has been clicked and the information was displaying the link text would change to "Hide Info" and the box would then close the opposite way it opened when "Hide Info" link was clicked?

Thanks.

You can do this quite easy:

$("#infoToggler").click(function()
{
    if($(this).html() == "Show info")
    {
        $(this).html("Hide info");
        $("#infoBox").show();
    }
    else
    {
        $(this).html("Show info");
        $("#infoBox").hide();
    }
});

Here is a jsfiddle example: http://jsfiddle.net/aFzG9/

The 'easiest' way would be to use jQuery and employ the .show() and .hide() methods.

For updating the link text, simply use something like

$("#linkId").text('Hide Info');

You can try out this example which you can easily run and tweak to meet what you want. You'll need to download the jquery file yourself though.

<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

  $(document).ready(function(){


  $("#bttn").click(function() {

   var str = $("#bttn").text();

    if(str == "Show Info")
    {   
     $("#content").show();
     $("#bttn").text("Hide Info");

     }

     else {

     $("#content").hide();
     $("#bttn").text("Show Info");
     }
  });

  });




</script>
</head>

<body>

<div id="content" style="display:none;width:200px;height:100px;border:1px solid gray;padding:2px"> I am a nice little div.</div>

<a href="#" id="bttn">Show Info</a>

</body>

</html>

<a href="#" id="ShowHideInfo">Show Info</a>
<div id="Info" style="display:none">info</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#ShowHideInfo").click(function(){
        $("#Info").toggle(function(){
            $("#ShowHideInfo").text($(this).is(":visible")?"Hide Info":"Show Info");
        });
    });
});
</script>