Jquery Slide/Toggle works but overlaps div below

Question

I have been trying the jquery slide/toggle function and I am able to get it to work using the code below (when the content of the '.Panel' Div stacks on top of each other).

Jquery

<script> 
$(document).ready(function(){
$(".Flip").click(function(){
$(".Panel").slideToggle("slow");
});
});
</script>

HTML

<div class="Flip">
  <p>Flip Heading</p>
</div>

<div class="Panel">

  <div class="Flipimages">
    <img src="#" alt="#" style="width:100%">
    <img src="#" alt="#" style="width:100%">
  </div>

  <div class="Fliptext">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

</div>

CSS

.Flip {
width: 95%;
margin: 0 auto;
text-align: center;
background-color: rgb(183,57,118);
border: 2px solid rgb(183,57,118);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
margin-top: 40px;
}

.Panel {
width: 95%;
margin: 0 auto;
padding: 10px;
display: none;
font-family: arial;
border: 2px solid rgb(183,57,118);
border-top: none;
}

I have 4 of these on the same page (all using different names so separate functions) and the problem occurs when I try and float the div elements inside div '.Panel'.

.Flipimages {
width: 50%;
float: left;
}

.Fliptext {
width: 45%;
float: left;
margin-left: 20px;
}

I am trying to float them left so the images and text sit alongside each other rather than on top of each other. The CSS works fine but when clicking on the 'Flip' div, it doesn't push the page content below it down. It overlaps it and looks very messy. This works fine when I don't float the above elements left but cannot think of a reason as to why this is affecting it.

Anyone have any ideas?

ps - I hope I explained this ok.

Thanks

Chris

duxfox-- · Accepted Answer · 2015-04-14T14:54:02.140

0

I think the problem is that you have parent elements that are not floated and child elements that are and its screwing everything up:

I've taken your code and updated it here, however, you will have to give width:100% to center those divs since they have to be floated (the flip and panel divs).

alternatively, you can put all that html inside a container that has width:95%; margin:0 auto; and this way you can still keep your width at 95% and keep everything centered.

here's an example

edited Apr 14 '15 at 14:54

answered Apr 14 '15 at 14:19

duxfox--

8,314
13
50
112

@Chris By the way, if you want each picture to have its own paragraph on the right of it, I suggest going row by row, rather than column by column. This way the image and the paragraph will be aligned. If you go column by column, aligning the image and text will be a nightmare to maintain – duxfox-- Apr 14 '15 at 15:33
Thanks. It's just to be 2 images on the left with text on the right hand side so no need (at present) for the images and text to align. That's the plan at the moment anyway... – Chris Apr 14 '15 at 16:26

Jquery Slide/Toggle works but overlaps div below

1 Answers1