jquery - ここのコードでjQueryが機能しない

Question

HTML:

<a href="javascript:void(0);" title="Show and Hide" id="_showhide">
    <span id="textsh">hide</span>
    <div id="contentsShowHide" style="display:none;">
        Contents here
    <div>

JavaScript:

function headerShowHide(){
$(document).ready(function(){
    $('#_showhide').click(function(){
        $('#contentsShowHide').toggle(function(){$("#textsh").text("show")},function(){$("#textsh").text("hide")});
      });
});}

<div id="contentsShowHide">は表示も非表示もされず、 のテキストは変更されません
<span id="textsh">。ここで何が欠けていますか？

Answer 1

使用する

$(document).ready(function(){
    $('#_showhide').click(function(){
        $('#contentsShowHide').toggle(function(){
            $("#textsh").html("show")},function(){
                $("#textsh").html("hide");
            });
        });
    });
});

headerShowHide() を呼び出す必要はありません。

Answer 2

このデモを試す

$(document).ready(function(){
$('#_showhide').toggle(function(){
    $("#textsh").text("show");
            $("#contentsShowHide").hide();
}, function(){
                $("#textsh").text("hide"); 
                    $("#contentsShowHide").show();
});
});

Answer 3

$('#_showhide').click(function(){   
    if ($('#contentsShowHide').is(":visible"))
    {
      $('#contentsShowHide').hide();
      $("#textsh").text("show");
    }
    else
    {
      $('#contentsShowHide').show();
      $("#textsh").text("hide");
    }
});

ワーキングデモ。シンプルなアプローチ