Jump to content

Search Show Hide Function


digitalrigs

Recommended Posts

I'm hoping someone can help with this. The code I have now is pasted below. I'm am able to get the search form to show or hide on click and double click but nothing else seems to work. Ideally, I would like the form to show on first click and then hide on a subsequent click. Any thoughts?

 

 

<div onclick="show();" ondblclick="hide();"><a href="#" class="clickme">Search</a></div>

<div id="tip" style="position: relative; visibility: hidden;"><form method="get" id="search_block" action="<?php echo home_url(); ?>" >

 

<label for="search_field_block"></label>

<!-- end auto clear label -->

 

<input type="text" name="s" id="search_field_block" value="" />

<!-- end search field -->

 

<input type="submit" id="search_submit_block" value="GO" />

 

<!-- end search submit -->

</form>

<!-- end search form --></div>

<script type="text/javascript">

function show() {

var d = document.getElementById('tip');

d.style.visibility = 'visible';

d.style.right = '52%';

d.style.top = '45%';

}

function hide() {

document.getElementById('tip').style.visibility = 'hidden';

}

</script>

Link to comment
https://forums.phpfreaks.com/topic/272377-search-show-hide-function/
Share on other sites

You have the onclick events defined for the DIV, but then use a link tag inside that. Either, put the onclick events on the DIV and don't use a link tag inside the did OR put the onclick events on the link tag. You can also create a single function to show or hide the form.

 

<html>
<head>
<script type="text/javascript">

function showhide(objID)
{
   var obj = document.getElementById(objID);
   var visibilityStatus = (obj.style.visibility!='visible') ? 'visible' : 'hidden';
   obj.style.visibility = visibilityStatus;
   return false;
}

</script>
</head>

<body>
   <div><a href="#" onclick="return showhide('tip');" ondblclick="return showhide('tip');" class="clickme">Search</a></div>
   <div id="tip" style="position: relative; visibility: hidden;">
       <form method="get" id="search_block" action="<?php echo home_url(); ?>" >
       <label for="search_field_block"></label>
       <!-- end auto clear label -->
       <input type="text" name="s" id="search_field_block" value="" />
       <!-- end search field -->
       <input type="submit" id="search_submit_block" value="GO" />
       <!-- end search submit -->
     </form>
     <!-- end search form -->
   </div>
</body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.