Блог

Я разрабатываю страницу, содержимое которой скрыто за кнопкой переключения jquery. Я хочу, чтобы оболочка содержимого расширялась как по горизонтали, так и по вертикали при нажатии (в настоящее время оболочка расширяется только по вертикали).

Я не уверен, как организовать мои файлы. В настоящее время оболочка имеет следующие атрибуты css:

 #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;
}
  

«Панель» div управляет javascript через:

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

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

Изменение ширины #wrapper непосредственно в css приводит к усечению содержимого внутри slideToggle: ie. оболочка не будет расширяться до нужного горизонтального размера после скольжения, если задана ширина. С другой стороны, если я удалю атрибут width , страница больше не будет должным образом обернута. Как я должен исправить эту проблему?

 <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">
  

Не уверен, что я полностью понимаю проблему, но вот 2 возможных решения:
1. используйте метод jQuery .animate() вместо slideToggle, который предоставит вам всю необходимую гибкость.
2. если у вас возникли проблемы с окружающим макетом, поместите свою оболочку внутри div с фиксированным размером и измените #wrapper на position:absolute