<html>
<head>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('a.show_hide').mouseenter(function (event) {
var slide = $(event.target).parent().find('.slidingDiv');
if (slide.attr('class') == undefined) {
slide = $(event.target).parent();
}
slide.slideToggle();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" class="show_hide">Item 1</a>
<div class="slidingDiv">
content 1 <a href="#" class="show_hide">hide</a>
</div>
</div>
<div>
<a href="#" class="show_hide">Item 2</a>
<div class="slidingDiv">
content 2 <a href="#" class="show_hide">hide</a>
</div>
</div>
</form>
</body>
</html>
Submit an article or tip