I have a button labeled "Search" that I want to click in order for my search field (which is currently hidden with display:none) to become visible. However, my current setup is not working as intended. I have created a jsfiddle to illustrate my issue. Although the code provided is not exact due to being in ModX, the functionality is similar - clicking the button should reveal the text.
<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;
}