CODEWITHSUNDEEP
javascriptjqueryhtml
codek
codek

Reputation: 343

Second click jQuery

I´m trying to make an animation that when I click on a search icon, it fadeIn the search input and add a class to make it wider. The problem is that I don´t know how to make it fadeOut in the second click after the search input it´s already displayed:

this is my code:

    $('#menu_search').click(function(){
        $('.search_input').fadeIn().toggleClass('full');
    });


    <li id="menu_search">
        <a href="javascript:void(0)"></a>
        <div class="search_input_container">
            <input type="text" class="search_input" value="Buscar">
        </div>
    </li>


        &#menu_search{
            background: url('../img/sprites.png') #000 2px 2px;
            width: 34px;
            height: 28px;
            padding: 0;
            margin-right: 0;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            .search_input_container{
                width: 500px;
                height: 30px;
                position: absolute;
                z-index: 20;
                left: -466px;
                .search_input{
                    float: right;
                    width: 100px;
                    background: #ffffff;
                    height: 30px;
                    border: none;
                    .round_corners();
                    .animate();
                    display: none;
                    &.full{
                        width: 772px;
                        display: block;
                    }
                }
            }
        }

Upvotes: 1

Views: 110

Answers (2)

dsgriffin
dsgriffin

Reputation: 68596

If it's always the second click, you should use fadeToggle() instead.

Upvotes: 1

Mathew Thompson
Mathew Thompson

Reputation: 56429

There's also a fadeToggle in jQuery. Try this:

$('#menu_search').click(function(){
    $('.search_input').fadeToggle().toggleClass('full');
});

Upvotes: 4

Related Questions