Ways to conceal an item by considering the size of a different element

I have a question about displaying content within a div element. I want to show a "show more" button only if the content inside the div exceeds a max height of 530px. Otherwise, the button should remain hidden.

Here is the code snippet I'm using:

Javascript

var clientHeight = document.getElementById('ccontainer').clientHeight;
if (clientHeight >= 530) {
    var x = 1;
} else {
    var x = 0;
}
if (x == 1) {
    div.classList.add('show');
}

HTML

<div class="ccontainer" id="ccontainer">
  <p id="context"> content </p>
  <div class="img" id="cntimgcon" >
    <img src="images\image2.jpg" id="cntimgp1">
  </div>
  <p id="context"> content </p>
</div>
<Button class="showmore"> show more </button>

Answer №1

let showMoreButton = document.querySelector('.showmore');
const containerHeight = document.querySelector('#ccontainer').clientHeight;

if (containerHeight <= 530) {
  showMoreButton.style.display = 'none'; // hide the button
} else {
  showMoreButton.style.display = ''; // display the button
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlock the full potential of knockout.js by mastering how to leverage templates recursively

Given the following model and view model for nested categories: function Category(id, name) { var self = this; self.Id = ko.observable(id || '00000000-0000-0000-0000-000000000000'); self.Name = ko.observable(name); self.children ...

Is it possible for a property to be null or undefined on class instances?

Consider this TypeScript interface: export interface Person { phone?: number; name?: string; } Does having the question mark next to properties in the interface mean that the name property in instances of classes implementing the interface ca ...

Implementing a Method to Detect Keypress Event on Anchor Element

Within our application, we have implemented anchor tags as buttons to enable specific style implementations. An interesting feature of the anchor tag is that it does not receive focus when navigating through tabs. Although we have successfully implemented ...

I'm experiencing an issue when trying to align TextPath to the center in an SVG file - a certain character

When using the startOffset or text-anchor attributes, I noticed that some characters are missing. How can I fix this issue? Thank you. It appears that in this scenario, the characters `1234` are missing. <svg xmlns="http://www.w3.org/2000/svg" versi ...

Struggling with implementing jQuery AJAX in Node.js Express - any tips?

Struggling with implementing ajax in node js for the first time. I've been testing it using the console, but unable to get a response. Here's my code: <script> function getMessage() { var data = $("#messageselect").val() $.ajax({ ...

Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...

Does the value obtained from a dropdown list change only once?

I have implemented a jQuery Ajax function to pass a value as a parameter to my controller, and receive HTML data back to update my cart table. $(document).ready(function () { $(".Quantity").change(function () { var ProID = $(this).attr("data" ...

Looking for ways to locate encoded HTML values in chrome?

Referenced from Microsoft Docs In MVC, the Razor engine automatically encodes all output coming from variables. For example, consider the following razor view: @{ var untrustedInput = "<"123">"; } @untrustedInput In this scenario, ...

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

Finding your current location and address using HTML5 geolocation

My web application utilizes HTML5 geolocation to obtain latitude and longitude coordinates. I am looking for a way to convert these coordinates into actual addresses whenever possible. Once that is done, I need to save the address information into a MySQ ...

Unable to locate any NativeScript modules for tns-core-module/ui

I'm working on a {N}-Application and facing an issue with importing Images from the tns-core-modules/ui/image module. Unfortunately, it seems that the target cannot be found within the tns-core-module. This is my code snippet: import * as ImageModul ...

What is the best way to choose the nearest element using the initial part of a class name?

I am working on a section of a table and need to hide a specific part when an icon is clicked. Below is the code snippet: <tr class="getmoreinfo_19"> <td>&nbsp;</td> <td colspan="3"> <div c ...

Obtain the key's name from the select query

My task is to populate a select element from JSON data, but the challenge lies in the formatting of the JSON where the keys contain important information. I do not have control over how the data is structured. I am attempting to iterate through the JSON a ...

The transparency of an image is being lost when it is used in a modal

I am facing an issue when trying to append a modal that contains only a transparent gif. The problem arises when the transparent background of the gif is not displayed properly. There seems to be no issue with the transparency settings of the gifs themselv ...

What is the process for "dereferencing" an object?

How can you access the properties of an object returned by a function in JavaScript? For instance: var tmp = getTextProperties(); font = tmp.font; size = tmp.size; color = tmp.color; bold = tmp.bold; italic = tmp.italic; While PHP offers the list ...

Instructions on how to insert a hyperlink into the information within the generated div utilizing an API

Currently, I am fetching information from an API based on the user's input (zipcode). The data retrieved includes the name of the institution, address, and webpage. I've been trying to make the webpage link clickable by adding a hyperlink to the ...

Is it possible to set spacing between the rows of an HTML table without also setting spacing for the columns?

Is there a way to add spacing between the rows of a table without affecting the columns? ...

Utilize AngularJS to enable the forward and back buttons to fetch JSON data, but ensure that the data is only retrieved if the item meets

I have successfully implemented forward and back buttons for paging through data items in an array from a JSON file: Controller: dishControllers.controller('DrinkcardsController', ['$scope','$http','$routeParams', ...

Attempting to incorporate a drop-down menu option in conjunction with JQuery PHP search functionality

I'm currently using the following code for a search function that fetches data from fetch_data.php and it's working well. However, I want to add an additional filter option to the search page, such as Country or City. I've tried several meth ...

Combining two CSS classes to create an "alias"

Currently, I’m utilizing bootstrap for table styling. For instance: <table class="table table-striped main"> However, the table I want to style is dynamically generated by a separate tool that I have no control over, and it already has its own ta ...