Ways to dynamically display or conceal a button based on the amount of data in a div

Question

Ways to dynamically display or conceal a button based on the amount of data in a div

I need help adjusting the toggle button in my code. Currently, it works well without the 'if' condition, but I want it to hide when there is less data and appear when there is more data. Additionally, I want to set a minimum height of 100px for the content div. Could someone assist me with this? Thank you.

https://i.sstatic.net/T2X09.png https://i.sstatic.net/lQF7E.png https://i.sstatic.net/pBYrn.png

var elmnt = document.querySelector(".backwhite");
var txt = elmnt.clientHeight + "px";
if (txt >= 100 + "px") {
var mydivh = document.querySelector(".backwhite");
mydivh.style.height = "100px";

function toggleDescriptionHeight(e) {
document.querySelector(".backwhite").classList.toggle('expanded');
e.target.textContent == 'Expand' ? e.target.textContent = 'Collapse' : e.target.textContent = 'Expand';
}
var button = document.querySelector('.btn');
button.addEventListener('click', toggleDescriptionHeight)
} else {

var myElements = document.querySelector(".bbttnn");
myElements.style.display = "none";
var myElement = document.querySelector(".backwhite");
myElement.style.height = "100px";
}

body {
background-color: #f1f3f6;
}
.backwhite {
background-color: #fff;
padding: 15px;
overflow: hidden;
}
.backwhite.expanded {
height: auto;
}

<div class="container">
<h4>Description</h4>
<div class="backwhite">
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>
<p>1. Create Ui For Email Campaign.</p>
<p>2. Create Functionality of Email Campaign</p>
<p>3. Create Keyword Display using Drag And Drop Functionality.</p>-->
</div>
<button type="button" class="btn btn-default btn-block">Expand</button>
</div>

javascript html css

Answer 1

Answer №1

Multiple redefinitions of variables were consolidated, CSS adjustments were made to accommodate all height definitions, and the if statement was cleaned up to remove 'px' (which can affect the comparison calculations).

It's important to note that if the minimum height in the CSS is set to 100px, the JavaScript code may not successfully hide the button. To address this, an additional count of child divs was implemented to enable the button hiding functionality when fewer than 3 are present.

The code has been rearranged and annotated for clarity in the following snippet.

var elmnt = document.querySelector(".backwhite"),
  txt = elmnt.clientHeight,
  button = document.querySelector('.btn');
// defining elmnt once is sufficient

function toggleDescriptionHeight(e) {
    elmnt.classList.toggle('expanded');
    if (e.target.textContent === 'Expand') {
      e.target.textContent = 'Collapse';
    } else {
      e.target.textContent = 'Expand';
    }
} // the function has been moved outside the if condition

if (txt >= 100 && elmnt.children.length > 3) { // the 'txt >= 100 &&' condition simplified
  button.addEventListener('click', toggleDescriptionHeight);
} else {
  button.style.display = "none";
}

body {
  background-color: #f1f3f6;
}
.backwhite {
  background-color: #fff;
  padding: 15px;
  height: 100px;
  /* height defined here */
  /* min-height: 100px; */
  overflow: hidden;
}
/* ensure button visibility with minimum height of 100px */

.expanded {
  /* should come after .backwhite */
  height: auto;
}

<div class="container">
  <h4>Description</h4>
  <div class="backwhite">
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  </div>
  <button type="button" class="btn btn-default btn-block">Expand</button>
</div>

Answer 2

Multiple redefinitions of variables were consolidated, CSS adjustments were made to accommodate all height definitions, and the if statement was cleaned up to remove 'px' (which can affect the comparison calculations).

It's important to note that if the minimum height in the CSS is set to 100px, the JavaScript code may not successfully hide the button. To address this, an additional count of child divs was implemented to enable the button hiding functionality when fewer than 3 are present.

The code has been rearranged and annotated for clarity in the following snippet.

var elmnt = document.querySelector(".backwhite"),
  txt = elmnt.clientHeight,
  button = document.querySelector('.btn');
// defining elmnt once is sufficient

function toggleDescriptionHeight(e) {
    elmnt.classList.toggle('expanded');
    if (e.target.textContent === 'Expand') {
      e.target.textContent = 'Collapse';
    } else {
      e.target.textContent = 'Expand';
    }
} // the function has been moved outside the if condition

if (txt >= 100 && elmnt.children.length > 3) { // the 'txt >= 100 &&' condition simplified
  button.addEventListener('click', toggleDescriptionHeight);
} else {
  button.style.display = "none";
}

body {
  background-color: #f1f3f6;
}
.backwhite {
  background-color: #fff;
  padding: 15px;
  height: 100px;
  /* height defined here */
  /* min-height: 100px; */
  overflow: hidden;
}
/* ensure button visibility with minimum height of 100px */

.expanded {
  /* should come after .backwhite */
  height: auto;
}

<div class="container">
  <h4>Description</h4>
  <div class="backwhite">
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  </div>
  <button type="button" class="btn btn-default btn-block">Expand</button>
</div>

Ways to dynamically display or conceal a button based on the amount of data in a div

Answer №1

Similar questions

Discover the Magic of Jquery Hover Effect Unleashed

Enhance User Experience with a Responsive Website Dropdown Menu

Top method for verifying input during keyup or blur events

How to retrieve a specific object within a specific container using jQuery

Navigating through intricate JavaScript object

Is there a way to verify the content inside the :before selector using Jasmine within an Angular 6 application?

Transform incoming AJAX response into Backbone model

Retrieving a compilation of items found within text selected by the user on a website

Rendering Local HTML with local styling and scripts in React Native Webview

Angular 2 doesn't reflect changes in component variables in the view until mouseover happens

`Is there a way to choose several radio buttons with varying names using just one label?`

The addition of special characters to strings in TypeScript through JavaScript is not functioning as expected

Error: The 'inputValue' property in the Select component of antd is malfunctioning

npm will only update when modifications are made to index.js

Customize the background color of a clipPath in SVG

What is the best way to align various types of content within a div container

Display or conceal checkboxes according to the elements in an array

What causes the inconsistency in CSS Hover behavior?

Retrieve the $first property from ng-repeat within the controller

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?