Below are the HTML and JS codes.

Issue : The toggle function automatically hides the link (i.e: hide text) after the page is loaded. Resulting which there remains no link to click to hide/show the div

HTML code:

<body>

<a id="hideshow">Hide</a>
<div id="message" style="border:1px solid #777; width:300px; padding:10px;">Here is some text.Here is some text.
Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.
Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.Here is some text.
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hideshow.js"></script>

</body>

JS Code:

$('#hideshow').toggle(function(){
$('#hideshow').text('Show');
$('#message').hide();
}, function(){
$('#hideshow').text('Hide');
$('#message').show();
});