Problem: Divs move when clicking

Question

I have a set of 4 divs with their own title, and when clicking on each one of them, the corresponding information is shown, when the page loads the divs are aligned with the margin between each of them, however, by clicking on one of the divs the rest move to the right, and the selected content is shown below that menu, as was supposed to.

I’ve tried several ways and none of them work, I’ve tried the attribute: position: Fixed / Static , for * display:block* and I simply cannot get the non-selected elements to remain in their initial position when selecting another element.

$('.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>

How can I do this ? I’ve been two days back from this problem...

Answer 1

See if that’s it:

$('.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;
  position: relative;
}
.box a {
  display: block margin-top: 175px;
  font-family: 'Open Sans Condensed';
  color: #1B3E90;
  text-decoration: none;
  font-size: 25px
}
.bottom {
  margin-top: 35px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.responsive1 {
  width: 500px;
}
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>

Modifications:

Created the class responsive1 in the CSS.

.responsive1 {
  width: 500px;
}

In class .box add position: relative;

In class .bottom:

.bottom {
  margin-top: 35px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}