Javascript onclick function - 2 clicks needed to work

Question

I have the following Javascript code:

function toggleSearch() {
  if(document.getElementById("searchitem").style.display == "block" ) {
    document.getElementById("searchitem").style.display = "none";
    document.getElementById("topsearchform").style.display = "block";
  }
  else {
    document.getElementById("searchitem").style.display = "block";
  }


}

function backtonormal() {
  if(document.getElementById("searchitem").style.display == "none" ) {
    document.getElementById("searchitem").style.display = "block";
    document.getElementById("topsearchform").style.display = "none";
  }
  else {
    document.getElementById("searchitem").style.display = "none";
  }


}

And the following HTML Code:

<li id="searchitem">
  <a href="#" onclick="toggleSearch();"><span>Search<span class="cursor"></span></span></a></li>
   <li>
     <div id="topsearchform">
<form class="topsearchform" action="http://www.ovisionmedia.com/search/" method="get" target="_top">
 <input type="text" name="search_text" class="search_text" onblur="backtonormal();" autofocus/>
<input type="button" name="button" class="button">
   </a>
    </form>
   </div>
</li>

The code is for a custom wordpress menu item which I created as follows:

function wpa_58902($items, $args){
if( 'main-menu' === $args -> theme_location ) {
    $search = '<li id="searchitem"><a href="#" onclick="toggleSearch();"><span>Search<span class="cursor"></span></span></a></li>';
    $search .= '<li><div id="topsearchform"><form class="topsearchform" action="http://www.ovisionmedia.com/search/" method="get" target="_top">';
    $search .= '<input type="text" name="search_text" class="search_text" onblur="backtonormal();" autofocus/><input type="button" name="button" class="button"></a></form></div></li>';

}
    return $items . $search;
}
add_filter('wp_nav_menu_items','wpa_58902',10,2);

The Javascript function should be executed when the searchitem link is clicked ( 1 time).

Problem: I have to click 2 times so the function will be executed.

2nd Problem: What code do I have to add to the Javascript function for the form input to be automatically focused? Right now the auto focus is only working if I reload the page.

Thank you very much!!

EDIT:

PROBLEMS SOLVED

@Zlatan O. - thank you very much! I found a solution on my own :-)

The Problem was that on the first click display:block was not set. After the first click display:block has been set and so on the second click it worked.

Here is the working code without using jquery:

function toggleSearch() {
document.getElementById("searchitem").style.display = "block";
  if(document.getElementById("searchitem").style.display == "block" ) {
    document.getElementById("searchitem").style.display = "none";
document.getElementById("topsearchform").style.display = "block";
document.getElementById('search_text2').focus();
  }
  else {
    document.getElementById("searchitem").style.display = "block";
  }


}

function backtonormal() {
  if(document.getElementById("searchitem").style.display == "none" ) {
    document.getElementById("searchitem").style.display = "block";
document.getElementById("topsearchform").style.display = "none";
document.getElementById('search_text2').focus();

  }
  else {
    document.getElementById("searchitem").style.display = "none";
  }


}

maybe it is not the best solution - I don't know - but it works :-)

Again thank you very much!!

Answer 1

In jQuery you can do it like this:

$(document).ready(function() {
    $('li#searchitem a').click(function() {
        $('#searchitem, #topsearchform').toggle();

            $('input[name="search_text"]').focus();
    });

    $('input[name="search_text"]').blur(function() {
        $('#searchitem, #topsearchform').toggle();
    });
});

Done!