Dropdown list with a search bar in

Dropdown list with a search bar in

've created a Wordpress site and it's responsive. The mobile version uses a drop-down list with the categories list in and at the bottom a search bar. As well as desktop, for mobile i have  a function where it uses a click function to toggle the list up and down. When using slideDown the list stays down and i am allowed to click in the search bar and type in it. When it is slideToggle the list can go up and down (which i want) but when i click on the search bar the list just goes back up. Is there another class i can use so instead of slideToggle a click function for once clicked slide down and when clicked again at the top slide back up. Here is my code that i have so far: 

<div id="nav-responsive"> <div class="categories-responsive fssinclair_bold"> <ul id="nav"> <li><h3 class="fssinclair_bold"></h3> <ul> <?php wp_list_categories('&title_li=') ?> </ul> <div class="search-responsive"> <form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"> <div id="search-inputs"> <input type="text" value="" name="s" id="search-box" placeholder="SEARCH" /> <input type="hidden" name="ref_url" value="<?php esc_url($_SERVER['REQUEST_URI'])?>"> </div> </form> </div> </li> </ul> </div> </div>

JavaScript for it to toggle on touch devices:

$(document).ready(function () { if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { $('.categories-responsive').click(function(){ $(this).find('ul#nav').find('ul').slideToggle(); });