Tenho um conjunto de 4 divs
com titulo próprio, e ao clicar em cada um eles, é mostrada a informação correspondente, quando a página carrega os divs
estão alinhados com margem entre cada um deles, porém, ao clicar num dos divs
os restantes movem-se para a direita, sendo que o conteúdo selecionado é mostrado em baixo desse menu, como era suposto.
Já tentei várias formas e nenhumas delas resulta, tentei pelo atributo: position: fixed / static , por * display:block* e simplesmente não consigo fazer com que os elementos não selecionados permaneçam na sua posição inicial, quando se seleciona um outro elemento.
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.bottom').hide();
$parent_box.find('.bottom').toggle();
});
.box {
display:block;
float:left;
}
.box a{
display:block
margin-top: 175px;
font-family: 'Open Sans Condensed';
color: #1B3E90 ;
text-decoration: none;
font-size: 25px
}
.bottom{
margin-top: 35px;
overflow:auto;
}
top:hover {
color:#F89326;
transform: scale(1.2);
display:block
}
.top:target {
display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a class="top" > OP1 </a>
<div class=" bottom" style="display: none;" >
<!--- ------------- introdução de frames --------------------- -->
<div class="responsive1" id="img1">
<div class="img" >
<a class="open" href="#">
<img src="../img/port/FardamentoUniform/1.JPG" alt=" " >
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive1" id="img2">
<div class="img" >
<a class="open" href="#">
<img src="../img/port/FardamentoUniform/2.JPG" alt=" " >
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</div>
</div>
<!-- --------------------Proxima Classe de produtos -->
<div class="box" >
<a class="top" > Bibs & Batas </a>
<div class=" bottom" style="display: none;" ><h1> OP2 </h1></div>
</div>
<!-- --------------------Proxima Classe de produtos -->
<div class="box" >
<a class="top" > Confeções Variadas </a>
<div class=" bottom" style="display: none;" ><h1> OP3 </h1></div>
</div>
<!-- --------------------Proxima Classe de produtos -->
<div class="box" >
<a class="top" > Equipamento Desportivo </a>
<div class=" bottom" style="display: none;" ><h1> OP4</h1></div>
</div>
Como posso fazer isto ? Estou á dois dias de volta deste problema...
float:left;
da.box