Problem: Divs move when clicking

Question

Problem: Divs move when clicking

Navigation

#1 by (0 votes)

0

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

I've tried several forms and none of them works, I've tried the position: fixed / static attribute * display: block * and I simply can not get the unselected 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><divclass="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'm two days back from this problem ...

html css

asked by anonymous 09.11.2016 / 05:12

1 answer

How to get the largest value with the longest length in mysql in order by desc? Finalize all the child threads of an activity

score 0 · Accepted Answer

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><divclass="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 responsive1 class in 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%;
}