Tutorial on hiding elements highly based on another element

Tutorial on hiding elements highly based on another element

This article will explain how to use JavaScript to dynamically hide or display another element based on the height of one container element (such as the Show More button). The core idea is to determine whether to hide the "Show More" button by getting the height of the container element and comparing it to the preset maximum height. This method is simple and effective, which can improve the user experience and avoid unnecessary element display.

In web development, you often encounter the need to dynamically adjust the display of elements according to the content of the page. For example, when the content height of a container exceeds a certain limit, the "Show More" button is displayed, otherwise the button will be hidden to avoid unnecessary clicks from the user. The following will introduce how to implement this function in detail.

HTML Structure

First, we need a container element, such as a div, to store content. At the same time, a "Show More" button is also needed.

 <div class="ccontainer" id="ccontainer">
  <p id="context"> Content 1 </p>
  <div class="img" id="cntimgcon">
    <img  src="/static/imghw/default1.png" data-src="images\image2.jpg" class="lazy" id="cntimgp1" alt="Tutorial on hiding elements highly based on another element" >
  </div>
  <p id="context"> Content 2 </p>
</div>
<button class="showmore"> Show more</button>

In this example, ccontainer is the id of the container element and showmore is the class of the "Show More" button.

JavaScript Code

Next, use JavaScript code to determine the height of the container and hide or display the Show More button based on the height.

 const btn = document.querySelector('.showmore'); // Get the button element const container = document.querySelector('#ccontainer'); // Get the container element const height = container.clientHeight; // Get the actual height of the container const maxHeight = 530; // Set the maximum height if (height <p> <strong>Code explanation</strong></p><ol>
<li> <strong>Get elements:</strong> Use the document.querySelector() method to get the "Show More" button and container elements respectively.</li>
<li> <strong>Get height:</strong> Use the clientHeight property to get the actual height of the container. The clientHeight property returns the visible height of the element, including the inner margins, but does not include scrollbars and borders.</li>
<li> <strong>Set maximum height:</strong> define a variable maxHeight to set the maximum height of the container.</li>
<li> <strong>Conditional judgment:</strong> Use the if statement to determine whether the height of the container is less than or equal to the maximum height.</li>
<li> <strong>Hide or Show Buttons:</strong> If the container height is less than or equal to the maximum height, set the display style of the Show More button to none, thus hiding the button. Otherwise, set the display style to an empty string '' to display the button.</li>
</ol><p> <strong>Things to note</strong></p>

• Make sure to execute JavaScript code after the DOM is loading. You can place the code at the bottom of the <script> tag, or use the DOMContentLoaded event listener.</script>
• If the content of the container is loaded dynamically, you need to re-execute this JavaScript code after the content is loaded to ensure that the button displays correctly.
• The value of maxHeight can be adjusted according to actual needs.
• display = '' will restore the default display attribute value of the element, usually inline, block, or inline-block, depending on the type of element.

Complete example

 


<title>Hide elements based on height</title>
<style>
  .ccontainer {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;
    max-height: 530px; /* Initial maximum height, only for visual effects*/
  }
</style>



<div class="ccontainer" id="ccontainer">
  <p id="context">This is an example piece of content that demonstrates how to hide the Show More button based on the height of the container. The "Show More" button will only be displayed when the content of the container exceeds a certain height. </p>
  <p id="context">This is an example piece of content that demonstrates how to hide the Show More button based on the height of the container. The "Show More" button will only be displayed when the content of the container exceeds a certain height. </p>
  <p id="context">This is an example piece of content that demonstrates how to hide the Show More button based on the height of the container. The "Show More" button will only be displayed when the content of the container exceeds a certain height. </p>
</div>

<button class="showmore">Show more</button>

<script>
  const btn = document.querySelector(&#39;.showmore&#39;);
  const container = document.querySelector(&#39;#ccontainer&#39;);
  const height = container.clientHeight;
  const maxHeight = 530;

  if (height <= maxHeight) {
    btn.style.display = &#39;none&#39;;
  } else {
    btn.style.display = &#39;&#39;;
  }
</script>

Summarize

Through the above steps, the function of dynamically hiding or displaying the "Show More" button according to the height of the container element can be achieved. This method is simple and effective, which can improve the user experience and avoid unnecessary element display. You can adjust according to actual needs, such as using the CSS class name to control the display status of the button, or using animation effects to smoothly display or hide the buttons.

The above is the detailed content of Tutorial on hiding elements highly based on another element. For more information, please follow other related articles on the PHP Chinese website!