Toggle and focus element

Question

I would like to hide a div and show it when the use select a drop button (like google showing questions in google search results). After some googling i found a way for this. I had used the below jquery to toggle between two states(show/hide) for a div.

function showDiv(a) {
  $("#" + a).toggle("slow");
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="showDiv('element')">Show</a>
<div id="element" class="hidden">
Hidden content
</div>

Now the problem is that it first shows the div. When i click the link it hides. But that's not what i need. I need to hide the div and it should only be shown when i click the link. Also the focus on the div is lost when i toggle between the states which is bad. Can anybody help me correct this. I need to focus the div on show as well as hide.

Answer 1

Try this inside your showDiv(a) function:

$("#"+a).toggle("slow").focus()

If you want to remove focus:

$("#"+a).blur();