HTML
<header id='site-header'> <div class='inner'> <h1><a href='/'>Site Name</a></h1> <p>Lorem ipsum dolor sit amet...</p> </div> <div class='inner hidden'> <form action='/search' method='get'> <input type='text' name='q' placeholder='Search...'> </form> </div> </header>CSS
#site-header { background-color:#6A2E79; overflow:hidden; text-shadow:0 1px 0 rgba(0,0,0,.1); margin:0 0 20px; position:relative; } #site-header .inner {padding:20px 30px} #site-header a { text-decoration:none; color:white; } #site-header a:hover {color:#E0FFED} #site-header h1 { font-size:30px; text-transform:uppercase; } #site-header p {margin:10px 0 0} #site-header form input { border:1px solid #743983; background-color:#3B2440; font:normal normal 12px Verdana,Arial,Sans-Serif; color:#95799B; padding:5px 5px; margin:0 auto; display:block; width:98%; -webkit-box-shadow:inset 0 1px 3px black; -moz-box-shadow:inset 0 1px 3px black; box-shadow:inset 0 1px 3px black; } #site-header .toggle-button { display:block; font-weight:bold; padding:10px 18px; text-align:right; border-top:1px solid #5D216C; } .hidden {display:none}jQuery
$(function() { var $header = $('#site-header'), $panel = $header.find('.inner'); // Insert a toggle button $header.append('<span class="toggle-button"><a href="/">Search</a></span>'); // Click the toggle button to slide the panel $header.find('.toggle-button a').on("click", function() { if ($(this).html() == 'Search') { $(this).html('×'); } else { $(this).html('Search'); } $panel.slideToggle('slow'); return false; }); });