CODEWITHSUNDEEP
jquery
Strawberry
Strawberry

Reputation: 67888

JQuery display issue

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>

Upvotes: 2

Views: 73

Answers (2)

Mike Robinson
Mike Robinson

Reputation: 25159

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(); }
);

Upvotes: 1

david
david

Reputation: 33537

I think that maybe the issue is that you are setting the context to this

so if you change :

function() {  $('#search', this).slideDown(); },

to 

function() {  $('#search').slideDown(); }

it might start to work...

Upvotes: 1

Related Questions