Show/Hide

Olá,

Estou desenvolvendo este site: www.palcco.com.br/ftp/bucker

Na seção 'Quem somos', nas caixas Missão, Visão, etc., estuo usando Jquery Show/Hide para exibir o conteúdo relacionado. O problema é que ao exibir o conteúdo escondido, este aparece cobrindo a próxima seção do site (Onde atuamos). Estou tentando fazer com que o conteúdo escindido empurre as outras seções para baixo ao invés de cobri-las. Acredito que seja algo no CSS. Já tentei diversas soluções que encontrei pesquisando, e nenhuma delas funcionou, e como resultado estou ficando desesperado!

Seque abaixo o código:

HTML para as seções Quem Somos e Onde Atuamos:

<section id="about">
 <section class="container">
 <a href="#home" class="smoothScroll voltar">
 <img src="img/voltar1.fw.png" alt="voltar">
 </a>

 <h2>Quem Somos</h2>
 <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>

 <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about1">
 <img src="img/icone_missao.fw.png" alt="Missão">
 </a>
 <div id="conteudo_about1" class="toggleDiv">
 <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
 </div>
 </section>

 <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about2">
 <img src="img/icone_visao.fw.png" alt="Visão">
 </a>
 <div id="conteudo_about2" class="toggleDiv">
 <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
 </div>
 </section>

 <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about3">
 <img src="img/icone_objetivo.fw.png" alt="Objetivo Empresarial">
 </a>
 <div id="conteudo_about3" class="toggleDiv">
 <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
 </div>
 </section>

 <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about4">
 <img src="img/icone_equipe.fw.png" alt="Equipe">
 </a>
 <div id="conteudo_about4" class="toggleDiv">
 <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
 </div>
 </section><!--conteudo_about-->
 </section><!--container-->
 </section><!--about-->

 <section id="atuacao">

 <section class="container">
 <a href="#home" class="smoothScroll voltar">
 <img src="img/voltar2.fw.png" alt="voltar">
 </a>
 <h2>Onde Atuamos</h2>
 <article class="box_atuacao">
 <a href="#">
 <img src="img/atuacao1.jpg" alt="Direito empresarial">
 <h3>Direito<br> Empresarial</h3>
 </a>
 </article>

 <article class="box_atuacao">
 <a href="#">
 <img src="img/atuacao2.jpg" alt="Direito Tributário">
 <h3>Direito <br>Tributário</h3>
 </a>
 </article>

 <article class="box_atuacao">
 <a href="#">
 <img src="img/atuacao3.jpg" alt="Direito Aduaneiro">
 <h3>Direito <br>Aduaneiro</h3>
 </a>
 </article>

 <article class="box_atuacao">
 <a href="#">
 <img src="img/atuacao4.jpg" alt="Direito Processual">
 <h3>Direito <br>Processual</h3>
 </a>
 </article>
 </section>

 <section class="container">
 <article class="box_atuacao2">
 <a href="#">
 <img src="img/atuacao5.jpg" alt="Direito Internacional">
 <h3>Direito <br>Internacional</h3>
 </a>
 </article>

 <article class="box_atuacao2">
 <a href="#">
 <img src="img/atuacao6.jpg" alt="Propriedade Intelectual">
 <h3>Propriedade <br>Intelectual</h3>
 </a>
 </article>

 <article class="box_atuacao2">
 <a href="#">
 <img src="img/atuacao7.jpg" alt="Direito Imobiliário">
 <h3>Direito <br>Imobiliário</h3>
 </a>
 </article>

 <article class="box_atuacao2">
 <a href="#">
 <img src="img/atuacao8.jpg" alt="Direito Agrário e Agronegócio">
 <h3>Direito Agrário <br>e Agronegócio</h3>
 </a>
 </article>
 </section><!--container-->
 </section><!--atuacao-->

CSS correspondente:

/*--------------------------------------------------------
QUEM SOMOS
----------------------------------------------------------*/

#about{
width:100%;
min-height:300px;
float:left;
background:#E5E5E5;
margin-top:0;
}

#about h2{

color:#004179;
margin-bottom:20px;
}

#about p,
#conteudo_about p,
#conteudo_about2 p,
#conteudo_about3 p,
#conteudo_about4 p{

font-size:12px;
color:#4C4C4C;
text-align:justify;
}

.content_box{
width:200px;

/height:200px;/

display:block;
float:left;
background:#E5E5E5;
margin-right:53px;
position:relative;
}

.content_box:active:after{

content:'';
width:0;
height:0;
position:absolute;
border:20px solid transparent;
border-top-color:#fff;
top:100%;
left:40%;
}

.content_box:last-child{

margin-right:0 !important;
}

#conteudo_about1 p,
#conteudo_about2 p,
#conteudo_about3 p,
#conteudo_about4 p{

font-size:12px;
color:#FFF;
text-align:justify;
}

/*--------------------------------------------------------
ONDE ATUAMOS
----------------------------------------------------------*/

#atuacao{
width:100%;
height:685px;
float:left;
background:url(img/fundo_atuacao.fw.png) center no-repeat;;
background-size:129.3% 100%;
margin-bottom:0;

}

#atuacao h2{

color:#FFF;
}

.box_atuacao{
width:200px;
height:200px;
float:left;
background:#FFF;
display:block;
margin-right:53px;
margin-top:40px;
position:relative;
}

.box_atuacao h3,
.box_atuacao2 h3{

width:100%;
font-size:18px;
color:#FFF;
text-transform:uppercase;
font-weight:200;
position:absolute;
top:60px;
 background:url(img/box_atuacao.png) center no-repeat;
-webkit-background:url(img/box_atuacao.png) center no-repeat;
background-blend-mode: multiply;
padding:20px 0;
text-align:center;

}

.box_atuacao h3:hover,
.box_atuacao2 h3:hover{

background:#FFF;
color:#004179;
}

.box_atuacao:last-child{

margin-right:0 !important;
}

.box_atuacao2{
width:200px;
height:200px;
float:left;
background:#FFF;

/display:block;/

margin-right:53px;
margin-top:40px;
position:relative;
}

.box_atuacao2:last-child{

margin-right:0 !important;
}

Jquery:

$(document).ready(function(){

 $('.show_hide').showHide({
 speed: 1000, // speed you want the toggle to happen
 easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
 changeText: 0, // if you dont want the button text to change, set this to 0
 showText: 'Show',// the button text to show when a div is closed
 hideText: 'Hide' // the button text to show when a div is open

 });

});

Javascript:

(function ($) {
 $.fn.showHide = function (options) {

//default vars for the plugin

 var defaults = {
 speed: 1000,

easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'

 };
 var options = $.extend(defaults, options);

 $(this).click(function () {

 $('.toggleDiv:hidden').slideUp(options.speed, options.easing);

// this var stores which button you've clicked

 var toggleClick = $(this);
 // this reads the rel attribute of the button to determine which div id to toggle
 var toggleDiv = $(this).attr('rel');
 // here we toggle show/hide the correct div at the right speed and using which easing effect

//slide up any divs that are not the one to be toggled
$('.toggleDiv').not(toggleDiv).slideUp(options.speed, options.easing);
$(toggleDiv).is(":visible") ? $('.toggleDiv').slideUp(options.speed, options.easing) :

 $(toggleDiv).slideToggle(options.speed, options.easing, function() {
 // this only fires once the animation is completed
if(options.changeText==1){
 $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
 });

 return false;

 });

 };
})(jQuery);

Desde já agradeço qualquer ajuda que será muito bem vinda!

Um grande abraço a todos,
Cristiano