change the div name after click on SlideToggle jquery - php

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

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

Answer 2

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