Do not include hidden div with display:none in nth child calculation

My website includes a List Group created with Bootstrap 4

HTML

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

CSS

.list-group-item:first-child {
 border-top-left-radius: 0.8rem;
 border-top-right-radius: 0.8rem;
}

.list-group-item:last-child {
 border-bottom-left-radius: 0.8rem;
 border-bottom-right-radius: 0.8rem;
}

I have implemented a simple script to toggle the 'd-none' class on elements within this list, but I'm facing an issue where the CSS border radius is affected by the hidden elements.

This results in the bottom corners never being rounded as expected because even the hidden child elements are considered in the styling.

https://i.sstatic.net/MkU7z.png

Specifically, Line 3 and 4 are hidden using .d-none. I want the CSS to round the bottom corners of Line 2 since it is the last visible child.

Is there a way to temporarily remove the nodes with JavaScript so that they do not impact the CSS styling?

javascriptjquerycssbootstrap-4

Answer №1

To improve the display of items in a list, consider using classes for radius instead. Whenever a change is made to how items are displayed, reset the classes on the first and last visible elements in the list.

const $list = $('.list-group');


function toggleFirstLast($list){
   const $items = $list.children().removeClass('first-visible last-visible')
   
   $items.filter(':visible:first').addClass('first-visible');
   $items.filter(':visible:last').addClass('last-visible')

}


toggleFirstLast($list)
.list-group-item {border:2px solid green; list-style-type:none}

.list-group-item.first-visible {
 border-top-left-radius: 0.8rem;
 border-top-right-radius: 0.8rem;
}

.list-group-item.last-visible {
 border-bottom-left-radius: 0.8rem;
 border-bottom-right-radius: 0.8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item first-visible" style="display:none">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item"  style="display:none">Morbi leo risus</li>
  <li class="list-group-item" style="display:none">Porta ac consectetur ac</li>
  <li class="list-group-item last-visible">Vestibulum at eros</li>
</ul>

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

Avoiding line breaks when submitting data through Ajax calls is achievable by using the `.val` method

I've come across multiple articles discussing ways to add line breaks to the .val in jQuery, but unfortunately none of them have worked for me. I attempted using the recommended workaround provided by jQuery: $.valHooks.textarea = { get: function( ...

javascriptjqueryajax

Ways to connect multiple characteristics attributes with leaflet's bindPopup feature?

Is there a method to connect multiple attributes in a popup using leaflet? I have imported a JSON file structured like this: { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { ...

javascriptjsonleafletgeojson

What is the best way to sum up multiple checkbox values in JavaScript?

var bookRate = new Array('The Right to differ', 'Issues In Contemporary Documentary', 'Writing, Directing and Producing', 'Lee Kuan Yew My Lifelong Challenge'); var selection = document.rate.checkbox; var sum = 0.00 ...

javascriptcheckbox

Unusual $http Angular.js POST inquiry

Hey there, I'm facing a peculiar issue in my web development project. I have a table that acts as an input field where users can enter data and then send it back to the Spring Rest API. The data is received as a String and then parsed using the Gson l ...

javascriptangularjsajaxspringrest

Challenges with Property Decorators in Angular 6

Hello there, I've been testing out this sample decorator code and encountered an issue that I can't seem to figure out. The error message I received was "cannot read property 'firstname' of undefined". It appears that the 'this&apo ...

javascriptangulardecorator

Error 405: Javascript page redirection leads to Method Not Allowed issue

After receiving the result from the ajax success method, I am facing an issue where the redirection to another page is being blocked and displaying the following error: Page 405 Method Not Allowed I am seeking suggestions on how to fix this as I need to ...

javascriptajaxasp.net-web-api

Utilize AJAX without jQuery to toggle between different content displayed on the index page and the login page

One issue I am facing is with the setup of my index.php page, which contains a sign-up form and a switch button. The button triggers an ajax request to fetch content from login.php and updates the form. However, I'm encountering difficulties when tryi ...

javascriptphpjqueryhtmlajax

Angular 7 data update causing issues with Bootstrap carousel functionality

I am encountering an issue with the Bootstrap carousel in my Angular 7 application. The carousel contains data that needs to be updated at regular intervals. Initially, the carousel works as expected. However, once the HTTP service updates the array of sli ...

angularbootstrap-4carouselangular7

Is there a method in which Howler can alert at specified time intervals?

Curious to know if there is a feature in Howler JS that allows for notifications every second? This would be useful for updating a state variable that keeps track of the duration a song has been playing. One approach could be: var audio = new Howl({ xhr: ...

javascripttypescriptrxjshtml5-audiohowler.js

Is there a way to change the format of the date "Wed Jan 01 2020 00:00:00 GMT+0530 (India Standard Time)" to JAN 01, 2020 in JavaScript?

I am currently retrieving the date from the database in the format of Wed Jan 01 2020 00:00:00 GMT+0530 (India Standard Time), but I would like it to be displayed in the JAN O1,2020 format without using moment.js. Is there any alternative approach to ach ...

javascriptjquerymongodbexpress

Executing a NodeJS function from a JavaScript function

I am working on a project involving Firebase and I am looking to connect a server-side function that can send an email to the client-side script. Below is my server-side index.js file: const functions = require('firebase-functions'); var nodema ...

javascriptnode.jsfirebaseemail

Is there a way to expand jQuery quicksearch functionality to include searching for words with accents?

Hello everyone, I'm currently working on the development of this website using jQuery isotope, WordPress, and jQuery quicksearch. Everything is functioning perfectly, but I would like to enhance its functionality. For example, when I type "Mexico," I ...

javascriptjquery-pluginsdiacriticsstring-comparisonaccent-insensitive

Using a Sinon stub with the 'new' keyword does not provide a return value

The following is my code snippet: const stub = sinon.stub().returns('a value'); console.log(stub()); // 'a value' console.log(new stub()) // functionStub {} I am aiming to verify stub.calledWithNew, while also requiring the stub to re ...

javascriptnode.jsmocha.jssinonchai

Tips for styling CSS for individual "ID" elements within a primary "Class" container

Struggling with crafting CSS code to style a specific HTML snippet. Take a look at the following HTML: <div class="FourSquares"> <div id="first"></div> <div id="second"></div> <div id="third"></div> ...

htmlcss

Tips on adding line breaks after periods that are not at the end of a sentence in HTML text nodes with regular expressions

Looking to craft a regex that can identify all periods not enclosed in quotes and not followed by a '<'. This is for the purpose of converting text into ssml (Speech Synthesis Markup Language). The regex will be utilized to automatically inse ...

javascriptregex

Tips for utilizing external CSS solely within a designated section

Currently, I'm working on a web application that requires the option to display a specific area using Bootstrap 4.1 or Bootstrap 3. The entire application is already built using Bootstrap 3: https://i.sstatic.net/pPuM6.png I have already implemented ...

cssbootstrap-4

The Express Generator is having trouble detecting the routes within the users file when using app.use('/login', users)

Having used the express generator, I am facing confusion regarding why I cannot utilize the users.js routes file for my login routes. I have created the POST route below, and when I keep it in app.js, everything works smoothly. However, if I attempt to mo ...

javascriptnode.jsexpressroutes

Setting up the Environment for Eslint within a current project: A Step-by-Step Guide

Encountered an error while building module (from ./node_modules/eslint-loader/index.js): Error: .eslintrc.js: Unknown key "es2021" in the environment at /Users/artic/Documents/RestroWorld/HRConsultancy/node_modules/eslint/lib/shared/config-valida ...

javascriptvue.js

The action of POSTing to the api/signup endpoint is

Currently delving into the MEAN stack, I have successfully created a signup api. However, when testing it using POSTMAN, I encountered an unexpected error stating that it cannot POST to api/signup. Here is a snapshot of the error: Error Screenshot This ...

javascriptnode.jsexpress

Content in Slider Exceeding Container Bounds

After successfully creating a slider using jQuery with the help of some Stack Overflow users, everything was working perfectly. However, when attempting to change the layout of the slider, it somehow broke and now all slides are being pushed out of the con ...

jqueryhtmlcss