Show Hide Divs

code To Show or Hide Divs

by Taqi_Shah

HTML

<div id="message_div" style="width:80%; margin:0 auto; color:black;">
    <h1> This is Div One </h1>
    <p>  With this module, you can create different types of dropdowns with different types of content. Module works perfect in all browsers. Some of CCS3 features degrades well in browsers that do not support it. Module comes in 5 different types with several skins each. </p>
    <p>With this module, you can create different types of dropdowns with different types of content. Module works perfect in all browsers. Some of CCS3 features degrades well in browsers that do not support it. Module comes in 5 different types with several skins each.</p>
 <br />
<input type="button" value="Discard" class="button-hide" />
 <br />
</div>
<div style="width:80%; margin:0 auto; color:black; margin-top:25px">
<input type="button" value="Send Message" class="button-show"  />   
</div>
<div style="width:80%; margin:0 auto; margin-top:25px">
    <h1>This is Div Two</h1>
<p>This is an OSX inspired dock menu, consists of only CSS . With some features which CSS3 offers and supported by current modern browsers, Docklr can simulate dock menu behavior in some degree without need of JavaScript. Also, it has a hover effect, bouncing icon, and stacked menu animation. It work best on modern browser that support CSS transition (Safari 3+, Chrome, Firefox 4.0+, Opera 10.5+, IE10 +) and CSS animation (Safari 4+, Chrome, Firefox 5.0+). Without it however, Docklr is still usable on older browser.
    This is an OSX inspired dock menu, consists of only CSS . With some features which CSS3 offers and supported by current modern browsers, Docklr can simulate dock menu behavior in some degree without need of JavaScript. Also, it has a hover effect, bouncing icon, and stacked menu animation. It work best on modern browser that support CSS transition (Safari 3+, Chrome, Firefox 4.0+, Opera 10.5+, IE10 +) and CSS animation (Safari 4+, Chrome, Firefox 5.0+). Without it however, Docklr is still usable on...

CSS

.button {        
    display: inline-block;
    white-space: nowrap;
    background-color: #ccc;
    background-image: linear-gradient(top, #eee, #ccc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
    border: 1px solid #777;
    padding: 0 1.5em;
    margin: 0.5em;
    font: bold 1em/2em Arial, Helvetica;
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: .2em;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover {
    background-color: #ddd;        
    background-image: linear-gradient(top, #fafafa, #ddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');        
}

.button:active {
    box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
    position: relative;
    top: 1px;
}

.button:focus {
    outline: 0;
    background: #fafafa;
}    

.button:before {
    background: #ccc;
    background: rgba(0,0,0,.1);
    float: left;        
    width: 1em;
    text-align: center;
    font-size: 1.5em;
    margin: 0 1em 0 -1em;
    padding: 0 .2em;
    box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
    border-radius: .15em 0 0 .15em;
    pointer-events: none;        
}

JavaScript

//DOM loaded 
        $(document).ready(function() {
            $("#message_div").hide();
            //attach click event to buttons
            $('.button-show').click(function(){
                
                /**
                 * when show button is clicked we call the show plugin
                 * which scales the box to default size
                 * You can try other effects from here: http://jqueryui.com/effect/
                 */
                $("#message_div").show(); 

            });

            $('.button-hide').click(function(){

                //same thing happens except in this case we hide the element
                $("#message_div").hide(); 

            });
        });