单击SlideToggle jQuery后更改div名称

Question

I have this slideToggle code. When I click the button that says "open", it changes the text to "close" but the problem It stays as "close" even if you click it again so I want to change the text back to "open" when I click on "close"

this code was working perfectly but now its not working with no reason.

<script>
    $(document).ready(function () {
        $("#open").click(function () {
             $("#close").slideToggle("slow");
             var t=$("#open").html()==="close"?"open:close";
             $("#open").html(t);
             reset ();
        });
    });
</script>


<div id="open" align="center"><p>open</p></div>
<div id="close"> <p>dddddddddddd</p></div>

<style type="text/css">

    #open {
        background:blue;
        height:25px;
        color:white;
    }

    #close {
        background:green;
        height:300px;
        color:white;
        display:none;
    }
</style>

Answer 1

try using .text() instead of .html()

also a better approach may be to toggle a class name on the container, and base your function on that, rather than on the inner text.

your updated jquery click handler would look something like this:

$('#toggler').click(function(){
  $(this).next('.textBit').slideToggle().toggleClass('open');

  if($(this).next('.open').length){
    $(this).text('closed');
  }
  else{
    $(this).text('open');
  }

});

heres a quick slideToggle demo that you can feel free to edit

and this is a version using a ternary operator

Answer 2

Use this instead:

$("#open").click(function(){
            $("#close").slideToggle("slow"); 
            $("#open").text($(this).text()=="open" ? "close" : "open");
        });