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

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

The 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;
}

The JavaScript

$(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  
Categories: General