DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Kalatravas Kostas

Kalatravas has posted 29 posts at DZone. View Full User Profile

Show/Hide Text Effect With JQuery UI

09.02.2011

| 2873 views |

        A simple code-snippet that with a mouse click will Hide/Show a text block ( div , paragraph) , although it can be modified to any DOM object on your website .
http://tournasdimitrios1.wordpress.com

<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Show/Hide Effects</title>

<link rel="stylesheet" type="text/css" media="all"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-darkness/jquery-ui.css"/>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
	</script>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js">
	</script>

	<script type="text/javascript">
		$(function() {
			$('button').click(function() {
				if ($(this).html() == 'Hide') {
					$('div').hide('fold', 'slow');
					$(this).html('Show');
				}
				else {
					$('div').show('fold');
					$(this).html('Hide', 'slow');
				}
			});
		});
	</script>

	<style type="text/css">
		div {
			padding: 34px;
			border: #aaa 2px solid;
			width: 750px;
			margin-bottom: 5px;
			background-color: #FFDE73;
		}
	</style>
</head>

<body>
	<div>
	
Lorem Ipsum is simply dummy text .......
	
	</div>
	<button>Hide</button>
</body>
</html>

Tags: