Image Image Image Image Image
Scroll to Top

To Top

jQuery Archives - THEMWEBS

22

Mar
2012

In jQuery
Web Development

By Manny

Show & hide content using jQuery

On 22, Mar 2012 | In jQuery, Web Development | By Manny

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: View working example

The HTML

</pre>
<div class="main_image">
<div class="desc" style="display: block;"><a class="collapse show" href="#">Click Me!</a>
<div class="block" style="opacity: 0.85; display: none;">
<h2>Hello</h2>
Hello this is content to slide up and show what is inside.

 <a href="#" target="_blank">Loreme ipsum delore</a></div>
</div>
</div>
<div class="main_image">
<div class="desc" style="display: block;"><a class="collapse show" href="#">Click Me!</a>
<div class="block" style="opacity: 0.85; display: none;">
<h2>Hello</h2>
Hello this is content to slide up and show what is inside.

 <a href="#" target="_blank">Loreme ipsum delore</a></div>
</div>
</div>
<pre>

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  

Tags | ,