Question

My fieldset doesn’t display onclick, what am I doing wrong?

$(document).ready(function(){
    $('#More').toggle(
        function() {  $('#search', this).slideDown(); }, 
        function() {  $('#search', this).slideUp(); });
});


<div> Item 1 <a href="#" id="More">Item 2</a> Item 3


<fieldset id="search" style="display: none;">
    <form>
        <input type="text">
    </form>
</fieldset>

</div>

Answer 1

this references the event target, which in this case in the #More link. Putting this into your $('#search', this) selector is equivalent to saying:

$(this).find("#search")

Since the #search is not contained within the link, the jQuery selector never applies the slideUp or slideDown functions.

Your code should instead be the following:

$('#More').toggle(
        function() {  $('#search').slideDown(); }, 
        function() {  $('#search').slideUp(); }
);