I'm attempting to create a slide toggle effect on a hidden DIV when a user hovers over specific link buttons.
JavaScript:
$(function () { // DOM ready shorthand
var $content = $(".sliderText");
var $contentdiv = $(".sliderContent");
var $homeToggle = $("#home");
var $listToggle = $("#list");
$contentdiv.hide();
$homeToggle.hover(function () {
$content.Text("Navigate to Home");
$contentdiv.stop().slideToggle();
});
$listToggle.hover(function () {
$content.Text("SDSFDFS");
$contentdiv.stop().slideToggle();
});
});
CSS:
.sliderContent {
margin: 0 auto;
text-align: center;
border: 2px dotted #00039a;
padding: 5px;
}
HTML:
<div>
<div class="container" id="homeDIV" runat="server" clientidmode="Static">
<a id="home" title="Navigate to home page" href="Default.aspx">Home</a>
</div>
<div class="container" id="listDIV" runat="server" clientidmode="Static">
<a id="list" title="Shows all the fields and their indexes per PDF form in the folder" href="ListFormFields.aspx">List PDF Form Fields</a>
</div>
[...]
</div>
The goal is for the showText div to expand by sliding down and displaying its contents whenever a user hovers over any of the <a> elements.
Currently, nothing happens when hovering over the links.
How can I make it work?
JSFiddle: http://jsfiddle.net/mt4m2/
Issue recorded here: http://youtu.be/68_kzCygYg4