Placing a JavaScript button directly below the content it interacts with

Question

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div affects the event functionality.

 $('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

.collapsible {
  border: none;
    width: 60px;
}

.container{max-width:800px;margin-bottom:20px;overflow:hidden;}
.collapsed{max-height:65px;max-width:200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <div class="content collapsed">
     <button class="collapsible">More</button>
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div></div>

javascript jquery css

Answer 1

Answer №1

Insert the button after collapsing the content within the div and apply overflow:hidden; to the div text instead of the container

$('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

.collapsible {
  border: none;
    width: 60px;
}

.container{max-width:800px;margin-bottom:20px;}
.collapsed{max-height:65px;max-width:200px;overflow:hidden;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <div class="content collapsed">
     
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div><button class="collapsible">More</button></div>

Answer 2

Insert the button after collapsing the content within the div and apply overflow:hidden; to the div text instead of the container

$('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

.collapsible {
  border: none;
    width: 60px;
}

.container{max-width:800px;margin-bottom:20px;}
.collapsed{max-height:65px;max-width:200px;overflow:hidden;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <div class="content collapsed">
     
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div><button class="collapsible">More</button></div>

Answer 3

Answer №2

Using CSS

$('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

.collapsible {
  border: none;
    width: 60px;
}
.content{
position:relative;
}
button{
position:absolute;
bottom:0px;
right:0px;
}

.container{max-width:800px;margin-bottom:20px;overflow:hidden;}
.collapsed{max-height:65px;max-width:200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <div class="content collapsed">
     <button class="collapsible">More</button>
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div></div>

Is this the solution you're looking for?

Alternative HTML Block Approach

$('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

.collapsible {
  border: none;
    width: 60px;
}
.content{
position:relative;
}
button{
}

.container div{max-width:800px;margin-bottom:20px;overflow:hidden;}
.collapsed div{max-height:65px;max-width:200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <div class="content collapsed">     
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div><button class="collapsible">More</button></div>

Answer 4

Using CSS

$('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

.collapsible {
  border: none;
    width: 60px;
}
.content{
position:relative;
}
button{
position:absolute;
bottom:0px;
right:0px;
}

.container{max-width:800px;margin-bottom:20px;overflow:hidden;}
.collapsed{max-height:65px;max-width:200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <div class="content collapsed">
     <button class="collapsible">More</button>
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div></div>

Is this the solution you're looking for?

Alternative HTML Block Approach

$('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

.collapsible {
  border: none;
    width: 60px;
}
.content{
position:relative;
}
button{
}

.container div{max-width:800px;margin-bottom:20px;overflow:hidden;}
.collapsed div{max-height:65px;max-width:200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <div class="content collapsed">     
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div><button class="collapsible">More</button></div>

Answer 5

Answer №3

You have the option to swap this

  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }

with

box.classList.toggle('collapsed')

Answer 6

You have the option to swap this

  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }

with

box.classList.toggle('collapsed')

Answer 7

Answer №4

To achieve the desired effect of having the button positioned right under the box or container that it will toggle the visibility for, you can utilize CSS. Here is an example:

<div class="container">
  <div class="content collapsed">
    <div class="text">Mauris dui mio</div>
    <button class="collapsible">More</button>
 </div>
</div>

In this structure, the button is placed under the content and a class is added to the div for further customization.

.content {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.collapsible {
  border: none;
  width: 60px;
}

You can add additional styles as needed. Using JavaScript, you can implement a click function on the button to adjust the height of the .text div based on its current state. Alternatively, you can also use absolute positioning like so:

.content {
  position: relative;
}

.collapsible {
  position: absolute;
  left: 0;
  bottom: 100;
}

The value for bottom can be adjusted to suit your layout requirements (e.g., 100 or 0). Feel free to experiment with these settings to achieve the desired visual alignment between the button and the content box.

Answer 8

To achieve the desired effect of having the button positioned right under the box or container that it will toggle the visibility for, you can utilize CSS. Here is an example:

<div class="container">
  <div class="content collapsed">
    <div class="text">Mauris dui mio</div>
    <button class="collapsible">More</button>
 </div>
</div>

In this structure, the button is placed under the content and a class is added to the div for further customization.

.content {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.collapsible {
  border: none;
  width: 60px;
}

You can add additional styles as needed. Using JavaScript, you can implement a click function on the button to adjust the height of the .text div based on its current state. Alternatively, you can also use absolute positioning like so:

.content {
  position: relative;
}

.collapsible {
  position: absolute;
  left: 0;
  bottom: 100;
}

The value for bottom can be adjusted to suit your layout requirements (e.g., 100 or 0). Feel free to experiment with these settings to achieve the desired visual alignment between the button and the content box.

Placing a JavaScript button directly below the content it interacts with

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Concealing items by placing them strategically between the camera and certain objects in Three.js

Stop the unnecessary reloading of Ajax data when navigating back using the browser's back button in Chrome and Internet Explorer

Multiple file uploads are causing the issue of req.file being undefined

`In the event that a series of criteria is unfulfilled in a JavaScript forEach() loop`

"Implementing React to dynamically load and update value in component, enabling user interaction with the

Tips for incorporating an anchor tag within an img tag in HTML?

Tips on personalizing the checkbox by incorporating a custom background image

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

Angular.js: Applying a style to elements beyond the current scope based on the selected route

Transferring data from an Excel spreadsheet into a structured table

$stateParams is not being properly defined when passed to the controller

Currently working on enhancing the responsiveness of the login form

The CSS transition fails to function correctly once a specific function is executed

What is the reason that jQuery does not work on HTML generated by JavaScript?

What could be causing the erratic jumping behavior of the "newsletter sign-up" form within my modal dialog window?

Limiting Firebase queries with startAt and endAt

Press the button to switch between displaying one component and hiding another component within reactjs

Forcing a property binding update in Angular 2

Adjust the number of columns based on the minimum screen resolution using columnizer