Jquery Slide messing up other div's

Question

I have a sight problem with jquery slide at the moment I have atached a code snippet that will show you the problem

Right now when I click the wrapper3head to drop down the wrapper 3 information it push 3 of the pad shapes down

My problem is that the 2 wrappers are now where near the pad but it still pushes them down

I am looking for help to get the 3 pad shapes to stay when I click the wrapper3head

if you run the snippet you will see what I mean just click the choose memory style div

    $(document).ready(function(){
    $("#wrapper3head").click(function(){
    $("#wrapper3").slideToggle("fast");
    });
    });
	
	$(document).ready(function(){
    $("#Informationhead").click(function(){
    $("#Information").slideToggle("fast");
    });
    });

.wrapper {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
}


.wrapper2{
  position: relative;
  width: 652px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
}

.wrapper3head{
  position: relative;
  width: 200px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
  text-align:center;
  float:right;
  margin-right:1%;
}

.wrapper3{
  position: relative;
  width: 185px;
  margin: 0 auto;
  display:none;
  border: 5px groove #8E2B2B;
  text-align:center;
  float:right;
  margin-right:1%;
}

.Informationhead{
  position: relative;
  width: 652px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
  text-align:center;
}

.Information{
  position: relative;
  width: 635px;
  margin: 0 auto;
  display:none;
  border: 5px groove #8E2B2B;
  text-align:center;
}

.back {
  position: relative;
  width: 648px;
  height: 648px;
  z-index: 0;
  background-color: #000;
  border:3.5px ridge white;
  border-radius: 310px;
}

.pad {
  width: 300px;
  height: 300px;
  float: left;
  z-index: 1;
  margin: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.shape1 {
  border-top-left-radius: 300px;
  background-color: green;
  border:2.5px groove white;
  
}

.shape2 {
  float: left;
  border-top-right-radius: 300px;
  background-color: red;
  clear: right;
  border:2.5px groove white;
  position: relative;
}

.shape3 {
  float: left;
  border-bottom-left-radius: 300px;
  background-color: yellow;
  clear: left;
  border:2.5px groove white;
}

.shape4 {
  float: left;
  border-bottom-right-radius: 300px;
  background-color: blue;
  border:2.5px groove white;
}

.Timer {
  position: absolute;
  top: 195px;
  left: 195px;
  width: 250px;
  height: 250px;
  background: #000;
  border-radius: 125px;
  border:2.5px solid White;
  z-index: 10;
  }




    

	
	

	
	Information
	
	Hello
	

	
	Choose Your Memory Style
	

	

	
	Do You Want Sound ?
	Yes
    Do You want Flashes ?
    Yes
    Do You want Text ?
    Yes
	
	
		
			
				
			
			
				
			
		    
			

			

			

			

			

            Time starts when you click start

Fahad Hasan · Accepted Answer

This is happening because the dropdown has a relative position. You will need to give it an absolute position so that it doesn't affect any other elements on the page once it opens. Adding this CSS to your stylesheet will fix the problem:

.wrapper3 {
     position: absolute;
     right: 0px;
}

Here's a working demo:

$(document).ready(function() {
  $("#wrapper3head").click(function() {
    $("#wrapper3").slideToggle("fast");
  });
});

$(document).ready(function() {
  $("#Informationhead").click(function() {
    $("#Information").slideToggle("fast");
  });
});

.wrapper {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
}
.wrapper2 {
  position: relative;
  width: 652px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
}
.wrapper3head {
  position: relative;
  width: 200px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
  text-align: center;
  float: right;
  margin-right: 1%;
}
.wrapper3 {
  position: absolute;
  right: 0px;
  width: 185px;
  margin: 0 auto;
  display: none;
  border: 5px groove #8E2B2B;
  text-align: center;
  float: right;
  margin-right: 1%;
}
.Informationhead {
  position: relative;
  width: 652px;
  margin: 0 auto;
  border: 5px groove #8E2B2B;
  border-radius: 15px;
  text-align: center;
}
.Information {
  position: relative;
  width: 635px;
  margin: 0 auto;
  display: none;
  border: 5px groove #8E2B2B;
  text-align: center;
}
.back {
  position: relative;
  width: 648px;
  height: 648px;
  z-index: 0;
  background-color: #000;
  border: 3.5px ridge white;
  border-radius: 310px;
}
.pad {
  width: 300px;
  height: 300px;
  float: left;
  z-index: 1;
  margin: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
}
.shape1 {
  border-top-left-radius: 300px;
  background-color: green;
  border: 2.5px groove white;
}
.shape2 {
  float: left;
  border-top-right-radius: 300px;
  background-color: red;
  clear: right;
  border: 2.5px groove white;
  position: relative;
}
.shape3 {
  float: left;
  border-bottom-left-radius: 300px;
  background-color: yellow;
  clear: left;
  border: 2.5px groove white;
}
.shape4 {
  float: left;
  border-bottom-right-radius: 300px;
  background-color: blue;
  border: 2.5px groove white;
}
.Timer {
  position: absolute;
  top: 195px;
  left: 195px;
  width: 250px;
  height: 250px;
  background: #000;
  border-radius: 125px;
  border: 2.5px solid White;
  z-index: 10;
}





  

  
    
  
  


  Information
  
    Hello
  

  
    Choose Your Memory Style
    

    

    
      Do You Want Sound ?
      Yes
      Do You want Flashes ?
      Yes
      Do You want Text ?
      Yes
    

    
      
        
      
      
        
      
      
        

        

        

        

        

        
          Time starts when you click start

Jquery Slide messing up other div's

Answers (1)

Related Questions

Jquery Slide messing up other div&#39;s

Answers (1)

Related Questions

Jquery Slide messing up other div's