Transition Not Working CSS

Question

So I currently have some JQuery on my page which allows a user to click on a button, and In turn, it will open a search box. However, I would like my search box to slowly glide open, instead of just popping open out of now where. So I added a transition for 2 class's in my CSS, but they don't want to work.

Here is my HTML:

<form class="ngen-search-form form-search" action="search" method="get">
    <input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
    <input type="text" onclick="expandSearch()" readonly="readonly" class="form-search-submit" value="&#x1f50e;">
</form>

CSS:

.form-search-input{
    width:0px;
    height:55px;
    display:none;
    border: 0;
    outline: 0;
    font-size:21px; 
    padding: 0px 0px 0px 20px;
    color: #151515;
    transition: .5s;
}
.search-input-open{
    width:410px !important;
    display: initial !important;
    transition: .5s;
}
.form-search-submit{
    width:55px;
    height:45px;
    border: 0;
    outline: 0;
    background-color:#151515;
    font-size:21px;
    color: white;
    cursor: pointer;
    text-align:center;
}

And JQuery:

function expandSearch(){
            $('#search-input').toggleClass('search-input-open');
        }

Any ideas on how it might not be working?

Thanks

Answer 1

Try this:

.form-search-input{
    width:0px;
    height:55px;
    border: 0;
    outline: 0;
    font-size:21px; 
    padding: 0px 0px 0px 0px;
    color: #151515;
    transition: all 0.5s;
}

.form-search-submit{
    display:inline-block;
    width:55px;
    height:45px;
    border: 0;
    outline: 0;
    background-color:#151515;
    font-size:21px;
    color: white;
    cursor: pointer;
    text-align:center;
}

.search-input-open{
    width:410px;
    padding: 0px 0px 0px 20px;
}

The JSFiddle

Answer 2

You should be able to do that with just jQuery alone. Have a look at the show/hide functions, and also the slide functions.

http://www.w3schools.com/jquery/jquery_hide_show.asp http://www.w3schools.com/jquery/jquery_slide.asp

The slideToggle() function might be what you are looking for if you want to open and close it smoothly