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"> is not showing or hiding, and the text is not changing for
<span id="textsh">. What am I missing here?

Answer 1

try this demo

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