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!!