CODEWITHSUNDEEP
javascriptcssslidetoggle
Nick Bewley
Nick Bewley

Reputation: 9289

slideToggle the whole div

I am developing a page where the content is hidden behind a jquery toggle button. I want the content wrapper to expand both horizontally and vertically when clicked (currently the wrapper only expands vertically).

I'm not sure how to organize my files. Currently, the wrapper has these css attributes:

#wrapper {
width: 900px;
margin: 0 auto;
margin-top: 40px;
background-color:#FFF;
border-radius: 42px;
-moz-border-radius:42px;
padding:30px;
-webkit-box-shadow: 0 0 10px #000;
}

The "panel" div controls the javascript via:

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

$(".btn-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
}); 
    });
</script>

Changing the #wrapper width directly in the css causes the content inside the slideToggle to be truncated: ie. the wrapper won't expand to the proper horizontal size after sliding if the width is set. On the other hand, if I remove the width attribute, the page is no longer properly wrapped. How should I remedy this problem? 

<div id="wrapper" >
<div id="intro" class="content-wrapper"><a href="#" class="btn-slide"><span class="content">CONTENT</span></a>
    <div class="wrapper-inner container"><div class="home-page container">
        <div id="panel">

Upvotes: 0

Views: 530

Answers (1)

karnyj
karnyj

Reputation: 1222

Not sure i fully understand the problem, but here are 2 possible solutions:
1. use the jQuery .animate() method instead of slideToggle, that will give you all the flexibility you need.
2. if you are having problems with the surrounding layout, place your wrapper inside a div with a fixed size, and change your #wrapper to position:absolute

Upvotes: 1

Related Questions