Если вы используете jQuery, тогда все просто:
$("textarea").bind("focus", function(){
$("span").show();
});
Тогда для ссылки дайте ей идентификатор в HTML:
<span>
<a href="#" id="closeme">Close me</a>
</span>
А потом:
$("#closeme").bind("click", function(){
$("span").hide();
});
Помните, что Javascript должен входить в теги <script></script>, а также обеспечивать включение jQuery на страницу, используя:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Если вы новичок в jQuery, то приведенный ниже код должен дать вам представление о том, как начать работу. Как правило, лучше ссылаться на элементы, использующие идентификаторы, а не их имена тегов, такие как textarea и span - это будет означать, что javascript будет нацелен на нужные элементы. Что-то вроде этого будет делать то, о чем вы спрашиваете:
<html lang="en">
<body>
<textarea id="form-details"></textarea>
<span id="form-details-info">
Some info about the textarea
<br/>
<a href="#">Close text area</a>
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
// When a user is using the textarea
$("#form-details").bind("focus", function(e){
// Show the span info
$("#form-details-info").show();
});
// When a user clicks the close link
$("#form-details-info a").bind("click", function(e){e){
// Hide the info
$("#form-details-info").hide();
// And use this to stop a prevent a link from doing what it normally does..
e.preventDefault();
});
});
</script>
</body>
</html>