Categories
General

Show Hide Content

In this tutorial I will show you how to show and hide HTML content using just 6 lines of JavaScript code. feel the power! dependency jQuery.

Here’s an example of what you are going to build:
[button url=”http://jsfiddle.net/element01/RQfXY/” style=”orange” open_type=”blank”] EXAMPLE [/button]

The HTML

[html]<div class="main_image">
<div class="desc" style="display: block; ">
<a href="#" class="collapse show">Click Me!</a>
<div class="block" style="opacity: 0.85; display: none; ">
<h2>Hello</h2>

<p>Hello this is content to slide up and show what is inside.<br>
<a href="#" target="_blank">Loreme ipsum delore</a>
</p>
</div>
</div>
</div>

<div class="main_image">
<div class="desc" style="display: block; ">
<a href="#" class="collapse show">Click Me!</a>
<div class="block" style="opacity: 0.85; display: none; ">
<h2>Hello</h2>

<p>Hello this is content to slide up and show what is inside.<br>
<a href="#" target="_blank">Loreme ipsum delore</a>
</p>
</div>
</div>
</div>[/html]

The CSS

[css]* { margin: 0; padding: 0; outline: none; }

body { background: #CCC; margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; }

/*–Main Image Area–*/
.main_image {
margin: 20px 0 0 20px; width: 249px; height: 440px;
float: left; background: white;
position: relative; overflow: hidden;
color: #fff;

moz-box-shadow: 0px 0px 4px #666;
-webkit-box-shadow: 0px 0px 4px #666;
box-shadow: 0px 0px 4px #666;
}

.main_image h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px; padding: 10px;
}
.main_image p {
font-size: 1.2em;
padding: 10px;
margin: 0;
line-height: 1.6em; }
.main_image .desc {
position: absolute;
bottom: 0; left: 0;
width: 100%;
display: none;
}
.main_image .block {
height: 410px;
width: 100%;
background: #111;
border-top: 1px solid #000; }
.main_image a.collapse {
background: black;
height: 30px; width: 249px;
position: absolute; top: -30px; right: 0px;
font: normal 12px arial;
color: white; text-align: center;
}
.main_image a.show {
background-position: left bottom;
}
[/css]

The JavaScript

[js]$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

//Toggle Teaser
$("a.collapse").click(function(){
$(this).next().slideToggle();
$(this).toggleClass("show");
});
});//Close Function [/js]

Leave a Reply