Question

I am trying to create a quick search function on the menu of my website using jquery. The code is very simple, when a user clicks the “quick search” link that will be part of menu of every page, an input text field will appear and they can search for whatever they want quickly. My code works for one toggle, but not more. I have been trying to fix this for ever now and it is suppose to be simple so i’m frustrated. I was hoping someone on here can maybe help me figure this one out?

NOTE: My code works more than once, on jsfiddle, but not anywhere else. -_-

Markup

<a href="#"> Register</a>  |
    <a href="#">My Account</a>  |
    <span>
        <span id="quicksearch" style="cursor:pointer; color:blue;"><a href="#">Quick Search</a></span>
        <input id="quickbox" type="text" style="float:right; display:none; padding:2px 5px 3px 5px; border:2px solid #ddd; margin-left:-110px; position:absolute; margin-top:20px;"/>
    </span> 

JQuery

<script type="text/javascript">
$(document).ready(function(){
    $("#quicksearch").click(function(){          
        $("#quickbox").toggle();
    });
});
</script>

Answer 1

Your style is messed up.. Fix it and it should work. See DEMO: http://jsfiddle.net/ZAHsv/5/

You can position using .top and .left from the quicksearch link.. see below,

$(document).ready(function(){   
    $("#quicksearch").click(function(){
        var qsPos = $(this).position();
        $('#quickbox').css({
             'position': 'absolute', 
             'top': qsPos.top + 20, 
             'left': qsPos.left
         }).toggle();
    });
});

DEMO: http://jsfiddle.net/ZAHsv/7/