Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below:

<span class="day-number">{{day-number}}</span>
<div class="event-box">
  <div class="event-container">
  </div>
  <div class="more-events">more ...</div>
</div>

The .event-container contains several .event elements as shown below:

<div class="event">{{event-name}}</div>

If the height of the .event-container exceeds 76px, the .more element should be displayed, otherwise hidden.

The CSS styles for the elements are as follows:

.event {
    text-align: left;
    font-size: .85em;
    line-height: 1.3;
    border-radius: 3px;
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    font-weight: normal;
    color: whitesmoke;
    padding: 0 1px;
    overflow: hidden;
    margin-bottom: 2px;
    cursor: pointer;
}
.event-box {
    max-height: 76px;
    overflow: hidden;
    position:relative;
}
.event-box .more-events {
    height: 10px;
    position: absolute;
    right: 0;
    bottom: 10px;
    display: none;
    z-index: 5;
}

No specific styling is provided for .event-container.

The desired functionality can be achieved using JavaScript (jQuery) by iterating through each .event-box and checking the height of its .event-container. Based on this, the display property of .more-events element is toggled.

Is there a purely CSS solution to achieve this without relying on JavaScript? Perhaps using pseudo-elements or media queries?

JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/

javascriptjqueryhtmlcss

Answer №1

If you're open to changing the markup, there's a way to create a similar-looking page without relying on JavaScript for toggling visibility. Check out this Fiddle for an example.

In my approach, I eliminated the 

<div class="more-events">more ...</div>
line and adjusted the styling of elements with the event class to show or hide based on user interaction when hovering over "more ...".

The additional CSS I included is as follows:

.event:nth-child(n){
    display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
    display: block;
}
.event:nth-child(5){
    text-indent: -9999px; 
    position: relative;
    display: block;
    color: black;
    border: none;
    background-color: #FFF;
}
.event:nth-child(5)::before{
    position: absolute;    
    text-indent: 0px; 
    content: "more ...";
    display: block;
}
.event:nth-child(5):hover{
    position: static;
    text-indent: 0; 
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    color: whitesmoke;        
}
.event:nth-child(5):hover::before{
    display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
    display: block;
}

I also made some adjustments to the .event-box class by removing max-height: 76px; as it didn't align properly with the height of four stacked .event elements in my browser. Additionally, I took out the update function.

Answer №2

Using only CSS, it may not be possible to achieve what you are trying to do. A better approach would be to add display:none to any event after the fourth one in your event container:

.event-box .event-container .event:nth-child(n+5){
    display: none;
}

This way, when there are more than four events, additional text will be displayed. Check out this updated FIDDLE for a demo.

UPDATE:

I have made some improvements to your JavaScript code as well in this updated version for a more professional look.

Answer №3

When utilizing a template to display the page, you may want to consider structuring it in the following manner:

<div class="activity-container">
{{#each activities}}
  <div class="activity-item">{{activity-name}}</div>
{{/each}}
</div>
{{#if showmoreitems}}
<div class="more-activities">show more...</div>
{{/if}}

Additionally, create the following function:

function showmoreitems() {
  return activities.length >= 6;
}

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

Why doesn't the datepicker work on my design page?

Hey, I've created a page and included a date picker code, but for some reason it's not working. Can someone please help me figure out why? Fiddle: https://jsfiddle.net/gqLudp1e/1/ <div class="form-group"> <label class="col-xs-2 con ...

jquery

Maintain authentication state in React using express-session

Struggling to maintain API login session in my React e-commerce app. Initially logged in successfully, but facing a challenge upon page refresh as the state resets and I appear as not logged in on the client-side. However, attempting to log in again trigge ...

javascriptreactjsexpresssessionredux

Vue.js CSS class interpolation

Is there a way to apply CSS classes dynamically in Vue.js? {{ category.icon }} --> "icon1" I am trying to achieve the following: <i :class="category.icon" class="icon icon-"></i> The desired output should be: ...

javascriptvue.js

What is the method for aligning navbar items to the right in Bootstrap 4?

I'm new to Bootstrap and I have a question about aligning navbar items to the right in Bootstrap 4. I've tried the solutions provided in this article Bootstrap 4 - Right Align Navbar Items, but they didn't work for me. I'm trying to un ...

htmltwitter-bootstrapbootstrap-4twitter-bootstrap-4twitter-bootstrap-4-beta

Guide to presenting fields on a distinct line or section in Angular 7 forms

I would like to arrange the username area and password area on separate lines with spaces in between. Here is the HTML code snippet: This HTML code is for a login angular GUI. <mat-card class="card"> <mat-card-content> <!-- CONT ...

htmlangularforms

Top method for passing props from child to parent React component

I am facing a challenge with passing data from child to parent components in React. I have an array that I need to save in my database, and I have set up a Parent component (AuthenticationPage.js) and a Child component (SignupForm.js) for this purpose. The ...

javascripthtmlnode.jsreactjs

Implement jquery styling to ajax response

Incorporating a jquery carousel to showcase images within a dynamically updated list has proven fruitful initially. However, once the content within the carousel container is replaced via ajax, all formatting seems to vanish. The root cause of this issue ...

javascriptjqueryajax

Integrate a PHP form that includes a redirect feature and an optional opt-in box

I'm a beginner and I'm trying to enhance this code by adding some extra features. When the form is submitted, I want the page to redirect to an external URL like www.google.com The checkbox should be automatically checked and when the client re ...

phphtml

Tips for activating a dropdown in Bootstrap 4

I am currently working on a dropdown menu where I want to set an active state upon a click. The active class is added successfully when a link is clicked, but the issue arises when trying to remove the active class when another link is clicked. I only want ...

htmljquerycssbootstrap-4

troubleshoot using Visual Studio Code

Here's the scenario: I need to debug a project using VS Code. The project is usually started by a batch file and then runs some JavaScript code. Now, I want to debug the JavaScript code, but I'm not sure how to do that. If anyone has any instruct ...

javascriptnode.jsvisual-studio-code

When making an XMLHTTPRequest, Chrome often responds with an "Aw, snap"

In the development of my server-based multiplayer game using three.js, I have set up the server to operate as follows: game->Server2.php->Server.txt game->Server.php->Server.txt->game The process flow is as follows: 1.) The game is gener ...

javascriptphpajaxgoogle-chromethree.js

Stacking components on top of one another using CSS

I have been experimenting with a dynamic sliding jQuery menu. By adjusting the drop-down area slightly upward using a negative margin, I was hoping to layer the dropdown on top of its parent element that triggers the action. I attempted using z-index witho ...

jqueryhtmlcss

Error: The code has a syntax issue due to an unexpected "function" token while using

Recently, I decided to try out Node version 6.2.1 with some of my code. My goal was to migrate the hyper-callback oriented codes to a cleaner and potentially more efficient approach. Surprisingly, when I attempted to run the node code in the terminal, an ...

javascriptnode.jsexpressasynchronousasync-await

When a child component sends props to the parent's useState in React, it may result in the return value being undefined

Is there a way to avoid getting 'undefined' when trying to pass props from a child component to the parent component's useState value? Child component const FilterSelect = props => { const [filterUser, setFilterUser] = useState('a ...

javascriptreactjsreact-hooksreact-props

Utilizing arrays in the label field of Chart.js

Creating a straightforward bar chart using Chartjs 3.x The process involves fetching JSON data from the server, parsing it, and storing specific parts in arrays. See the code snippet below: serverData = JSON.parse(http.responseText); console.log(serverDa ...

javascriptchart.js

The loading GIF in jQuery is malfunctioning when displayed simultaneously on multiple div elements

I am currently working on my Laravel dashboard's blade to showcase various statistics. These stats will be updated whenever the date picker is changed. Below is the code for my date picker: <div class="row"> <div class=&qu ...

javascriptphpjqueryajax

Does Node Express call the next middleware immediately when the next function is called?

Can someone please help me grasp the concept of how the next function operates within the Node Express framework? I know that we utilize the next function within the current middleware to trigger the execution of the subsequent middleware listed. These mid ...

javascriptnode.jsexpress

The function this.someFunction does not exist

Even though I have gone through the details of the bind requirement for methods to be associated with a React ES6 class, I am still facing challenges with this specific example: class ProductList extends React.Component { constructor(props) { super( ...

javascriptreactjsthis

What is causing my css elements to appear larger compared to other instances?

As someone who is not a designer, I find myself doing a lot of cutting and pasting for my side hustles. I believe many others can relate to this experience. Currently, I am working on a personal project that involves using tailwindcss, appwrite, and svelte ...

csstailwind-cssdaisyui

Sliding in a strange way

Are you experiencing a strange behavior with the slider on your website? When you hover over the image, the caption at the bottom slides up and on mouseout it slides down again. It works perfectly on . However, when navigating to portfolio via the menu on ...

javascriptjqueryajax