Make a button's active state show my search box

I've got a button with a search label. The idea is that when you click the button (and put it in the active state) my search field which is put on display:none becomes visible. My current setup doesn't seem to work however. I've created a jsfiddle containing my problem. Since this already is in ModX i cant paste the exact code but if clicking the button shows the text it yields the same result.

<div id="header">
    <div class="search_function">[[$base.search-tpl]]</div>
    <button class="search_button">Search</button>

#header label{
    display:none;
}

#header input{
    width:88%;
    height:30px;
    float:left;
    margin:0px;
    padding:0 0 0 10%;
    text-align:center;
    border-radius:0px;
}

#header button{
    width:12%;
    height:30px;
    margin:0px;
    padding:0px;
    background-image:url('../images/transparent_search_icon30x30.png');
    background-color:#eeeeee;
    background-repeat:no-repeat;
    background-position:center;
}

.search_button:active > .search_function{
    display:all;
}
.search_function{
    display:none;

}

Solution

Ok, first include jQuery library in the <head> section of your document e.g.

Google CDN version

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

or download the compressed, production jQuery 1.11.0 and put it in your root folder then include it like this

<script src="jquery-1.11.0.min.js"></script>

then add below script just before the </body> tag

<script>
  (function($) {
    $('.search_button').click(function() {
      if($('.search_function').css('display') === 'none') {
         $('.search_function').slideToggle(350);
      }
    });
  })(jQuery);
</script>

Here's a FIDDLE