Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Cristiano Santos_12646

Show/Hide

Recommended Posts

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se você colocar sua div #atuacao com position: relative; e tirar o position:absolute; das suas divs que aparecem e somem você conseguirá começar a ter uma noção de como fazer o que você quer.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.