Collapsible search button without using collapsible header

Question

With JQM, I am trying to achieve the following header design

---

|[Home] Company------------------------------[Search][Filter]

---

[list of items]

Home button and company tille left aligned and the Search and Filter right aligned.

When the user clicks on the search icon, I want the following search bar to appear between the header and the list of items

        <div data-role="fieldcontain">
            <label for="search">Search Input:</label>
            <input id="search-tickets"  type="search" name="search-mini" id="search-mini" data-mini="true" />
            </div>  

JQM docs guided me to collapsible headers. While this is good, its incredibly hard to accommodate other icons like the home, company text and filter in the same header if it is marked collapsible.

Is there any alternative to collapsible headers that I can use and still maintain status quo on the header?

Answer 1

The trickiest part is the header button/text alignment (please test my solution in all browsers). For the search bar I would just hide/show the main element on search button click.

Code - :

 $(document).on("click", "#search-button", function(event) { $("#searchtickets").toggle(); }); 

 .company { display: table-cell; padding-left: 3em; } .spacerright { margin-right: 50px !important; } 

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div data-role="page"> <div data-role="header"> <h1 class="company">Company</h1> <a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="home"></a> <a class="ui-btn-right spacerright" href="#page-new-ticket" id="search-button" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a> <a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a> </div> <div data-role="content"> <div data-role="fieldcontain" id="searchtickets" style="display:none;padding-bottom:1em;"> <label for="search">Search Input:</label> <input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" /> </div> <ul data-role="listview"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </div> </div> 

Answer 2

I think u need not any JS or css library for this, u can do it with only some lines of pure CSS code ( like this tutorial ) -

 body { background: #fff; color: #666; font: 85%/140% Arial, Helvetica, sans-serif; width: 800px; max-width: 96%; margin: 0 auto; } a { color: #69C; text-decoration: none; } a:hover { color: #F60; } h1 { font: 1.7em; line-height: 110%; color: #000; } p { margin: 0 0 20px; } /* reset webkit search input browser style */ input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; /* remove the search and cancel icon */ } /* search input field */ input[type=search] { background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 130px; background-color: #fff; border-color: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); } /* placeholder */ input:-moz-placeholder { color: #999; } input::-webkit-input-placeholder { color: #999; } /* demo B */ #demo-b input[type=search] { width: 15px; padding-left: 10px; color: transparent; cursor: pointer; } #demo-b input[type=search]:hover { background-color: #fff; } #demo-b input[type=search]:focus { width: 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; } #demo-b input:-moz-placeholder { color: transparent; } #demo-b input::-webkit-input-placeholder { color: transparent; } 

 <h3>Try this</h3><br/> <form> <input type="search" placeholder="Search"> </form> <h3>Or this</h3> <form id="demo-b"> <input type="search" placeholder="Search"> </form> 

And u can also do this by this way of using a small JS-

 $(function() { $('.srch-button').click(function(){ var $wrapper = $('.srch-wrapper'), isOpen = $wrapper.hasClass('open'); $wrapper.toggleClass('open') .find('.srch-input')[isOpen ? 'blur' : 'focus'](); // remove this - onyl for demo return false; }); }) 

 body { padding: 10px 20px; background-color: #343434; color: #fff; } .center { padding: 60px; max-width: 400px; margin-left: 200px; } .srch-form { position: relative; width: 44px; } .srch-wrapper { position: absolute; top: 0; right: 0; width: 44px; height: 40px; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .srch-wrapper.open { width: 200px; } .srch-input { position: relative; background-color: transparent; height: 44px; line-height: 26px; padding: 5px 10px 5px 32px; box-sizing: border-box; border: 2px solid #ddd; border-radius: 100px; margin: 0; width: 100%; } .srch-input:focus { outline: none; border-color: #aaa; } .srch-button { position: absolute; top: 0; left: 0; border: 0; padding: 0; margin: 0; background-color: transparent; color: #ddd; width: 44px; height: 44px; text-align: center; } .srch-button:focus { outline: none; } .srch-input:focus + .srch-button, .srch-button:hover { color: #aaa; } 

 <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script> <div class="center"> <form action="" class="srch-form"> <div class="srch-wrapper open"> <input type="text" class="srch-input" placeholder="Search..." /> <button class="srch-button" type="submit"> <em class="icon-search"></em> </button> </div> </form> </div>