顶部隐藏/显示面板-freejs.net代码演示

首页>>Jquery文字>>顶部隐藏/显示面板(2013-12-08)

顶部隐藏/显示面板

JavaScript Code

<script type="text/javascript">
$(document).ready(function(){
// Lets make the top panel toggle based on the click of the show/hide link
$("#sub-panel").click(function(){
// Toggle the bar up
$("#top-panel").slideToggle();
// Settings
var el = $("#shText");
// Lets us know whats inside the element
var state = $("#shText").html();
// Change the state
state = (state == 'Hide' ? '<span id="shText">Show</span>' : '<span id="shText">Hide</span>');
// Finally change whats insdide the element ID
el.replaceWith(state);
}); // end sub panel click function
}); // end on DOM
</script>

XML/HTML Code

<div id="top-panel"><img src="http://www.freejs.net/images/logo.png" width="300" class="face"/><strong>freejs</strong><br />
<span>freejs.net</span><br />
Visit my site: <a href="#">site</a></div>
<div id="sub-panel"><a href="#" id="toggle"><span id="shText">Hide</span></a></div>
<br/><br/>