Show Hide jQuery effect

Adding some jQuery effects to your website can enrich it visually and can diverse functionality. This tutorial shows how to show & hide website content with jQuery magic.

Click the demo link and then “Jelly INFO” link to see how the effect looks like.

 

 

 

 

DEMO: http://yokowebdesign.co.uk/demo/jQuery_tutorial/

DOWNLOAD the files: http://yokowebdesign.co.uk/demo/jQuery_tutorial.rar

—————————————————————————

FAQ:  WHEN to use the show/ hide effect? If you have content that does not have to be necessarily shown straight away. WHY to use jQuery? It’s compact and powerful – you can accomplish great effects with minimal code so the your productivity is increased. It is rich in features – e.g. animations, interactions. You can use jQuery without worrying about cross browser compatibility. Among all these advantages it is also friendly with other coding languages, e.g. AJAX. And if you are stuck you can count on helpful community.

—————————————————————————

EXPLANATION (Syntax and Description):

HTML – Jelly info area

<div id="jelly_info_area">
    <div id="hidden_jelly_data">
       <div>
           <p>
                Jelly
           </p>
       </div> 
       <div>
           <p>
               are found in every ocean, BLAH BLAH BLAH
           </p>
       </div> 
    </div>
    <a href="#" id="jelly_link"></a> 
</div>

The HTML code consists of the area that stays hidden and the link that reveals this hidden section. The important thing is to include the reference to our JavaScript document in the head section of our the HTML doc.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript" src="show_hide_jquery.js"></script>

jQuery

$(document).ready(function()
    {
       $("#hidden_jelly_data").hide();
       $("#jelly_link").html("Jelly INFO");
       $("#jelly_link").click(function() 
        {
           if (this.className.indexOf('clicked') != -1 ) 
             {
               $(this).prev().slideUp(500);
               $(this).removeClass('clicked')
               $(this).html("Jelly INFO");
             }
           else 
             {
               $(this).addClass('clicked')
               $(this).prev().slideDown(500);
               $(this).html("Hide INFO");
             }
        });
   });

CSS – Jelly info area

div#jelly_info_area
{
 /*border: 1px solid blue;*/
 float: left;
 margin: -330px 0 0 250px;
}
a#jelly_link
{
 /*border: 1px solid blue;*/
 float: right; 
 margin: 11px 0 0 0;
 width: 90px;
 text-decoration: none;
 color: #cc9acc;
 text-decoration: none; 
 font-family: Jasmine, Verdana ;
 font-size: 80%;
}
 a#jelly_link:hover
{
 color: #a775a7; 
}
div#hidden_jelly_data
{
 /*border: 1px solid blue; */
 float: right;
 margin: 0 30px 0 0;
 padding: 5px 0 0 5px;
 width: 310px;
 /* background-color: #858b9c; */
 background-color: rgba(133,139,156,.2);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
}
div#hidden_jelly_data div
{
 /* border: 1px solid violet; */
 width: 250px;
 float: left;
 margin: 0 0 15px 0;
} 

div#hidden_jelly_data div p
{
 /*border: 1px solid violet; */
 margin: 0 0 0 10px;
 padding: 0 0 0 10px; 
 text-align: left;
 width: 260px;
 font-family: Verdana;
 font-size: 80%; 
 color: #fff; 
}

 What do you think about this tutorial? Let me know in the comment section. Toodeloo! Yoko