Have Geek Brain

JQuery display issue

My fieldset is not showing 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>
+2


a source to share


2 answers


this

refers to the event target, which in this case is in the #More reference. Typing this

into your selector is $('#search', this)

equivalent to saying:

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

Since #search is not in the link, the jQuery selector never invokes slideUp or slideDown.



Instead, your code should be like this:

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


a source


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

so if you change:

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


to

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

it can start working ...

+1


a source






More articles:


All Articles