jquery - div 内で前後にテキストを変更する

Question

div と span タグ内のテキスト領域に小さな問題があります。それが行うことは、ドロップダウン div を開くための href になることです。テキストをもう一度クリックすると、その div が閉じます。

<a href="#" id="toggle4">
    <span class="halfCircleBottom">OPEN</span>
</a>

だから私が達成したいのは、OPENをクリックするとCLOSEに変わり、CLOSEをクリックするとOPENに変わるはずです。これまでに見つけたのは、テキストを一度変更することだけですが、元の値に戻すことはできません。

Answer 1

$('span.halfCircleBottom').click(function(){
    this.innerHTML = this.innerHTML === "OPEN" ? "CLOSE" : "OPEN";
});

ライブデモ

Answer 2

$(document).ready( function(){
    $("#cf_onclick").toggle(
        function(){$(this).html("<h2>A</h2>");},
        function(){$(this).html("<h2>B</h2>");}
    ).click();
});

別の方法

$('#toggle_template').html(function(i, html) {
        if (html.indexOf(' (click to view)') > 1) {
            return html.replace(' (click to view)', ' (click to close)')
        }
        return html.replace(' (click to close)', ' (click to view)')
    }); 

JSFIDDLE デモ

2番目のメソッドJSFIDDLEデモ