I am creating a search bar that is revealed when a trigger is clicked on.
I’ve used this tip and this fiddle to reveal the hidden search bar div.
This is the js I’m using:
jQuery(document).ready(function ($) {
var $searchBox = $('#search-wrapper #search-box');
var $searchTrigger = $('.search-trigger');
$searchTrigger.on("tap", function (e) {
e.preventDefault();
e.stopPropagation();
$searchBox.slideToggle();
});
$(document).on('tap', function (event) {
if (!($searchBox.is(event.target)) && ($searchBox.has(event.target).length === 0)) {
$searchBox.slideToggle();
};
});
});
The jQuery mobile is causing a bug. When I click on a valid link, a “loading” statement flashes on the screen and the page clicked has loaded in a messy way underneath the current page.
