When the 'Show More' button is clicked, one Div will smoothly slide over another Div

Question

When the 'Show More' button is clicked, one Div will smoothly slide over another Div

I've been struggling for hours to find a way to make one DIV slide over another DIV below it instead of pushing it down.

The setup is quite straightforward. I have a script that reveals more text when the 'Show More' button is clicked. Despite trying different properties like display, z-index, position, and others, I haven't been able to achieve the desired effect. Below is the code I'm working with.

My goal is to click the 'Show More' button and have the DIV with Text 1 slide over the DIV below it with Text 2.

Thank you 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>

javascript jquery html css

Answer 1

Answer №1

In my opinion, the best approach would be to utilize a toggle class method or add a class and utilize CSS for managing the transition/position of the divs. You may also want to explore transformations as they can be helpful in achieving the desired effect. This scenario seems like it could benefit from a translation.

I have put together a live example on this 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');
});

Answer 2

In my opinion, the best approach would be to utilize a toggle class method or add a class and utilize CSS for managing the transition/position of the divs. You may also want to explore transformations as they can be helpful in achieving the desired effect. This scenario seems like it could benefit from a translation.

I have put together a live example on this 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');
});

When the 'Show More' button is clicked, one Div will smoothly slide over another Div

Answer №1

Similar questions

Chrome timing out when sending an express post request

Error Connecting to Database with Node.JS MySQL Module - ECONNRESET Issue

How can I effectively separate the impact of Next.js onChange from my onClick function?

Is There a Quicker Alternative to Eval for Generating Deep Clones?

`` I am experiencing a problem with CSS display block in Internet Explorer

VueJS error: Trying to access properties of undefined object ('$refs') is unsuccessful

"Discover the best way to use Ajax to submit a form once it has been successfully

I'm unsure about the JavaScript toolkit framework's handling of selecting HTML class attributes

Enhance your MongoDB with the power of JQuery and ExpressJS combined with the magic

Is there a way to implement a targeted hover effect in Vue Js?

Exploring TypeScript: Understanding how to define Object types with variable properties names

Issue encountered when sending information to asmx web service via ajax and displaying the result on an HTML page with a javascript function

What is the best way to ensure that my Material UI container occupies the entire width and height of the

Issue with MVC HTML Helper DropDownListFor failing to submit the chosen value

Create a stylish slide-in menu using CSS, triggered by an onclick event. No JavaScript required!

Having trouble parsing PHP JSON encoded data in JavaScript

The Serverless Function appears to have encountered a critical error and has

Using Google API to retrieve Gmail data in Java by accessing it with an id_token obtained from JavaScript

Attempting to pass HTML content from a Laravel controller to display in data tables

Creating an array of custom objects in JavaScript.Initializing custom objects in an