Create a Show/Hide Link - HTML and CSS [closed]

Question

Can anyone help me with this problem? I am new using CSS/HTML. I want to create a link div to hide and show its contents. What am I doing wrong?

Here is my code:

html

<a href="#" id="hideShow">My Title</a>
<div id="message" style="visibility:hidden; border: 1px solid #777; width: 400px; padding: 1%;">
    Blah Blah Blah Blah
</div>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript"> 

    $("#hide").toggle(
        function(){$("#message").show();},
        function(){$("#message").hide();},
});

</script>  

Thanks...

Answer 1

Try this,

$("#hideShow").click(function(){
   $("#message").toggle();
});

Note: Your id of "My Title" a tag is hideShow & not hide, also use display:none instead of visibility: hidden;.

$("#hideShow").click(function() { $("#message").toggle(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" id="hideShow">My Title</a>
<div id="message" style="display:none; border: 1px solid #777; width: 400px; padding: 1%;">
    Blah Blah Blah Blah
</div>