digitalrigs Posted December 26, 2012 Share Posted December 26, 2012 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 More sharing options...
Psycho Posted December 26, 2012 Share Posted December 26, 2012 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> Link to comment https://forums.phpfreaks.com/topic/272377-search-show-hide-function/#findComment-1401352 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.