CODEWITHSUNDEEP
jqueryhtmlcss
user3097736
user3097736

Reputation: 284

hide/show div with animation

I have 3 division, and I want to hide/show the <div id="framecontentLeft"> with animation using Jquery. I tried and followed some tutorials and demos on how to do this but why it doesn't working.

And how to automatically get the width of #framecontentTop{ #maincontent{ if the #framecontentLeft hide and back to it's original width if the #framecontentLeft shows?

Here's my full script. Any help please?

<script type="text/javascript">
$(document).ready(function(){

        $("#framecontentLeft").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $("#framecontentLeft").slideToggle();
    });

});

</script>
<style>
body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }

    #framecontentLeft, #framecontentTop{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 150px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: silver;
    color: white;
    }

    #framecontentTop{ 
    left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 0;
    width: auto;
    height: 120px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background: green;
    color: white;
    }

    #maincontent{
    position: fixed; 
    left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    top: 120px; /*Set top value to HeightOfTopFrameDiv*/
    right: 0;
    bottom: 0;
    overflow: auto; 
    }

    .innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }

    * html body{ /*IE6 hack*/
    padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
    }

    * html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 100%; 
    }

    * html #framecontentTop{ /*IE6 hack*/
    width: 100%;
    }

.show_hide {
    display:none;
}
</style>


<a href="#" class="show_hide">Show/hide</a>


<div id="framecontentLeft">
    <div class="innertube">
 <a href="#" class="show_hide">hide</a>
    </div>
    </div>

    <div id="framecontentTop">
    <div class="innertube">

    </div>
    </div>

    <div id="maincontent">
    <div class="innertube">

    </div>
    </div>

Upvotes: 0

Views: 340

Answers (2)

user1890615
user1890615

Reputation:

Should be:

$(document).ready(function(){

        $("#framecontentLeft").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $("#framecontentLeft").slideToggle();
    });

});

Explanation: #framecontentLeft selects the element by its id, where as .framecontentLeft selects the element by its class.

Upvotes: 2

CRABOLO
CRABOLO

Reputation: 8793

http://jsfiddle.net/jqYLE/1/

The reason it wasn't working is because you were using .framecontentLeft instead of #framecontentLeft

$(document).ready(function(){

        $("#framecontentLeft").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $("#framecontentLeft").slideToggle();
    });

});

Upvotes: 1

Related Questions