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> Quote Link to comment 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.