I created a More link in my form, it runs well on Firefox and

Question

0

Asked: May 27, 20262026-05-27T07:50:29+00:00 2026-05-27T07:50:29+00:00

I created a More link in my form, it runs well on Firefox and

0

I created a “More” link in my form, it runs well on Firefox and IE9, but behaves strangely on Chrome. It shows the #advanced_search in 5 clicks! (see the picture below). How can I fix it or determine where the error is?

enter image description here

Here is my HTML:

<form id="jp_search" enctype="application/x-www-form-urlencoded" action="" method="post">
    <dl class="zend_form">
        <input type="text" name="keyword" id="keyword" value="" class="txtinput" onfocus="if(this.value=='Keyword') this.value='';" onblur="if(this.value=='') this.value=('Keyword');">
        <select name="category" id="category" class="jp_select">
            <option value="0" label="-- choose a category --">-- choose a category --</option>
            <option value="5" label="Accounts payable/ Receivable">Accounts payable/ Receivable</option>
            <option value="6" label="Actuarial analysis">Actuarial analysis</option>
            <option value="8" label="Interior Design">Interior Design</option>
            <option value="9" label="Computer Animation">Computer Animation</option>
            <option value="10" label="Mobile flash">Mobile flash</option>
            <option value="11" label="Engineering">Engineering</option>
        </select>
        <input type="text" name="location" id="location" value="" onfocus="if(this.value=='Location') this.value='';" onblur="if(this.value=='') this.value=('Location');">
        <input type="submit" name="submit" id="jp_submit" value="">

        <div class="advanced_search" id="advanced_search" style="display: block; ">
            <div class="group_combo" id="group_combo">
                <select name="job_level" id="job_level" class="jp_select">
                    <option value="0" label="-- choose a level --">-- choose a level --</option>
                    <option value="1" label="New Grad/Entry Level/Internship">New Grad/Entry Level/Internship</option>
                    <option value="2" label="Experienced (Non-Manager)">Experienced (Non-Manager)</option>
                    <option value="3" label="Team Leader/Supervisor">Team Leader/Supervisor</option>
                    <option value="4" label="Manager">Manager</option>
                    <option value="5" label="Director">Director</option>
                    <option value="6" label="CEO">CEO</option>
                    <option value="7" label="Vice President">Vice President</option>
                    <option value="8" label="President">President</option>
                </select>
                <select name="contract_type" id="contract_type" class="jp_select">
                    <option value="0" label="-- choose a type --">-- choose a type --</option>
                    <option value="1" label="Full-Time Permanent">Full-Time Permanent</option>
                    <option value="2" label="Full-Time Temporary">Full-Time Temporary</option>
                    <option value="3" label="Part-Time Permanent">Part-Time Permanent</option>
                    <option value="4" label="Part-Time Temporary">Part-Time Temporary</option>
                    <option value="5" label="Contractor/Consultant">Contractor/Consultant</option>
                    <option value="6" label="Other">Other</option>
                </select>
            </div>
            <div class="group_combo" id="group_combo">
                <input type="text" name="salary_min" id="salary_min" value="" class="txtinput" onfocus="if(this.value=='Min salary') this.value='';" onblur="if(this.value=='') this.value=('Min salary');">
                <input type="text" name="salary_max" id="salary_max" value="" class="txtinput" onfocus="if(this.value=='Max salary') this.value='';" onblur="if(this.value=='') this.value=('Max salary');">
            </div>
        </div>
    </dl>
</form>     
<div id="advanced_search_div"> 
   <a href="#" id="advanced_search_show" title="More">&rsaquo; More</a>
</div>

Javascript :

$('#advanced_search_show').click(function(){
    $('#advanced_search').toggle();
});

UPDATE: I found an issue with textbox focusing in Chrome, when I focus in a text box, it expand automatically the padding between two line. I highly appreciate any help ^_^. (I try to update this question in Chrome and it’s crashed >_<, I have to change to Firefox).

enter image description here