jump to navigation

Show/Hide Text Effect with jQuery UI September 2, 2011

Posted by Tournas Dimitrios in JQuery.
trackback

JQuery has quickly become one of the most popular JavaScript libraries in use today and the official UI library for JQuery is “JQuery UI” , although it is not the only library built on top it ( in my opinion it’s without a doubt the best) . JQuery UI runs on top of JQuery to provide a suite of rich and interactive widgets along with code-saving interaction helpers , built to enhance the user interfaces of your website and web-applications . The “JQuery UI”  is also supported by a range of helper CSS classes , and the excellent ThemeRoller application that allows a developer to visually create custom themes for the UI widgets .

This article will just demonstrate 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 . Demo …..

<!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>

Download the code from DZone-Snippets 

Alternatively (without JQuery UI) use the following code :

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>You can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Show/Hide Panel</p>

</body>
</html>

Read :

// ]]>

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s