Div slide over Div when 'Show More' button clicked

Question

I have spent hours trying to figure out how to simply have a DIV slide over another DIV below it, rather that move the DIV down with it.

The set up is fairly simple. I have found a script that revels more text when the 'Show More' button is clicked. I have tried playing around with properties like; display, z-index, position and a few others to no avail. Below is the code I am working with.

I would like to be able to click the 'Show More' button to then have the DIV with Text 1 to slide over the the DIV below it with Text 2.

Thanks so much in advance!

    <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <script>
$(document).ready(function(){ 
$(".show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev("div.content");
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
  } else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
  };

  $this.text(linkText);
});});

    </script>

    <style>

.text-container {
margin: 0 auto;
width: 60%;
border: 1px black solid;
}

.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;  
}

.showContent {
line-height: 1em;
height: auto;
}

.showContent {
height: auto;
}


.show-more {
padding: 10px 0;
text-align: center;
z-index: 999;
position: relative;
overflow: hidden;
display: block;   
}

.text-container-stay {
margin: 0 auto;
width: 60%;
border: 1px black solid; 
height: 200px; 
z-index: 1;
        }

    </style>

<div class="text-container">

  <div class="content hideContent">
    Text 1 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, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

    <div class="text-container-stay">    Text 2 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, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>


    </body>

Answer 1

Personally I would use a toggle class method or add a class and let CSS handle the transition/position of the divs. Also check out transformations! This would be an ideal candidate for a translation.

I created a fiddle: https://jsfiddle.net/1q5pen4L/3/

HTML

<div id="one">
Stuff
</div>
<div id="two">
Other Stuff
</div>
<button id="do_stuff">
Do Stuff
</button>

CSS

div {
  width: 200px;
  background-color: red;
  height: 100px;
  transition: .3s all;
}
div:last-of-type {
  background-color: green;
}

#one.active {
  transform: translateY(100%);
}

jQuery

$("#do_stuff").click( function () {
    $("#one").toggleClass('active');
});

Div slide over Div when 'Show More' button clicked

Question

1 answers

solution1
1 2018-08-08 20:34:15

Div slide over Div when 'Show More' button clicked

Question

1 answers

solution1 1 2018-08-08 20:34:15

solution1
1 2018-08-08 20:34:15