My current markup looks like this:
<div class="wrapper-header">
<div class="container">
<div class="navbar">
<ul class="nav navbar-nav">
<li class=""><a href="#" class="toggle">Show Categories</a></li>
</ul>
</div>
</div>
<div class="wrapper-categories">
<div class="container">
Content Here
</div>
</div>
The .wrapper-categories is set to display: none; by default, so it only becomes visible when clicked on with:
$(".toggle").on('click', function (event){
event.preventDefault();
$(".wrapper-categories").slideToggle("fast");
$(this).html(function(i,html) {
if (html.indexOf('Browse') != -1 ){
html = html.replace('Show','Hide');
} else {
html = html.replace('Hide','Show');
}
return html;
});
});
Now, I want to change it so that the .wrapper-categories shows when hovered over instead of clicked. Furthermore, the content should remain visible if the mouse is over it, and should hide when the mouse is no longer over the link or the content div.
I attempted to change it to $(".toggle").hover(function() { and it worked, but the content is not staying open. What additional adjustments are needed?