Разрешайте полям "Развернуть-свернуть" перемещать / подталкивать основное содержимое вниз и вверх

StackOverflow https://stackoverflow.com/questions/2478750

  •  21-09-2019
  •  | 
  •  

Вопрос

У меня только что возник вопрос о выравнивании двух полей расширения-свертывания, и я получил ответ, и это сработало, но не я столкнулся с другой проблемой.

Когда я разворачиваю свои поля, текст под ними (основное содержимое) не сдвигается вниз, а больше “смещается вправо”.

Проблема понятна из приведенного ниже кода:

<!DOCTYPE html>
<html>
<head>

<!-- Panel Slider for Contact -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

 <!-- Expand Collapse -->
    <script type="text/javascript">$(function(){
$("#mostrar1").click(function(event) {event.preventDefault();
                $("#caja1").slideToggle();
                });

$("#caja1 a").click(function(event) {event.preventDefault();
                $("#caja1").slideUp();
                });
$("#mostrar2").click(function(event) {event.preventDefault();
                $("#caja2").slideToggle();
                });

$("#caja2 a").click(function(event) {event.preventDefault();
                $("#caja2").slideUp();
                });
}); </script>

<style type="text/css">
.wrapper {
    width:  30%;
    float: left;
}
            #caja1 {
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar1{
            display:block;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            color: #FFFFFF;
            }

            #caja2 {
            display: none;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#99a8ff;
            }

            #mostrar2{
            display:block;
            padding:5px;
            border:2px solid #FFFFFF;
            background-color:#0C415F;
            color: #FFFFFF;
            }

</style>
</head>

<body>

<div class="wrapper">
<a href="#" id="mostrar1">Private</a><div style="display: none;" id="caja1"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</div>
<div class="wrapper">
<a href="#" id="mostrar2">Erhverv</a><div style="display: none;" id="caja2"><a href="#" class="close">[x]</a><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p></div>
</div><br>
<p>THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXSES: <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</body>
</html>

Кто-нибудь знает, как "объяснить" мои поля расширения, чтобы нажимать все ниже и ниже текст под ними?

Спасибо Местика

Это было полезно?

Решение

Добавить clear: left к основному контенту, вот так:

CSS

#content {
    clear: left;
}

HTML

<div id="content">
  <p>
  THIS IS MY CONTENT TEXT UNDER THE EXPAND COLLAPSE BOXES:
  ...
  </p>
</div>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top