Conceal all div elements except for displaying the initial two

Can an entire div be hidden with only the first 2 entities visible?

<div class="inline-edit-col">
    <span class="title inline-edit-categories-label">Brands</span>
    <ul class="cat-checklist product_brand-checklist">
        <li id="product_brand-3039"><label class="selectit">acer</label></li>
        <li id="product_brand-3040"><label class="selectit">asus</label></li>
    </ul>

    <span class="title inline-edit-categories-label">Product Categories</span>
    <ul class="cat-checklist product_cat-checklist">
        <li id="product_cat-3039"><label class="selectit">mobile</label></li>
        <li id="product_cat-3040"><label class="selectit">car</label></li>
    </ul>

</div>

This is the HTML structure, but I want to only display the first two and hide the rest. Is there a way to achieve this using CSS or JavaScript?

I attempted to use CSS to hide the third and subsequent elements:

.product_cat-checklist{
  display:none;
 }

However, this hides everything one by one which is not ideal. Any suggestions on how to accomplish this more effectively?

javascriptjqueryhtmlcss

Answer №1

You can easily achieve this using CSS without the need for Javascript

span:nth-child(n+4) {
  display:none;       // hides all spans from the 4th child onwards
}
ul:nth-child(n+5) {
  display:none;      // hides all uls from the 5th child onwards
}

Here is how it works:

div               // parent
|-- span          // 1st span - 1st child of parent
|-- ul            // 1st ul   - 2nd child of parent
|-- span          // 2nd span - 3rd child of parent
|-- ul            // 2nd ul   - 4th child of parent
|-- span          // 3rd span - 5th child of parent
|-- ul            // 3rd ul   - 6th child of parent
|-- span          // 4th span - 7th child of parent
|-- ul            // 4th ul   - 8th child of parent
|-- span          // 5th span - 9th child of parent
|-- ul            // 5th ul   - 10th child of parent
...

Answer №2

Give this a shot

Utilize jQuery's gt selector

$('.inline-edit-col > *:gt(1)').hide(); //hide all elements after the second index (zero-based index)

Alternatively,

Use array.slice

$('.inline-edit-col').children().slice(2).hide();

Answer №3

Assign a class of "unit" to each span-ul element

For example:

<div class="inline-edit-col">
<div class="unit">
<span class="title inline-edit-categories-label">Brands</span>
<ul class="cat-checklist product_brand-checklist">
    <li id="product_brand-3039"><label class="selectit">acer</label></li>
    <li id="product_brand-3040"><label class="selectit">asus</label></li>
</ul>

</div>
<div class="unit">
<span class="title inline-edit-categories-label">Product Categories</span>
<ul class="cat-checklist product_cat-checklist">
    <li id="product_cat-3039"><label class="selectit">mobile</label></li>
    <li id="product_cat-3040"><label class="selectit">car</label></li>
</ul>
</div>

Then, in the CSS: 

.inline-edit-col * {
        display:none;
    }

.unit:nth-child(1),.unit:nth-child(2) {
    display:block;
}

This will achieve the desired result. Keep in mind that the order is important.

For more information on CSS selectors, visit: http://www.w3schools.com/cssref/css_selectors.asp

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

Nextjs: where all roads lead back to the homepage

Having an issue in my app where all redirects keep leading back to the homepage. The problem seems to stem from my Navbar.js component, as shown below. Despite adding the required route in the Link tag for next-js, both client and server compilation is suc ...

javascriptreactjsnext.jsroutes

The interaction issue in Ionic 4 with Vue js arises when the ion-content within the ion-menu does not respond to clicks

My Vue app has been set up with Ionic 4 using @ionic/vue. Below is the code snippet from the main.js file: import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store&apos ...

javascriptvue.jsionic-frameworkionic4ion-menu

Add three rows without clicking, then click once to add one row at a time

Seeking guidance on how to defaultly display 3 rows after adding and removing rows, as well as applying the removal of a default set of 3 rows using JavaScript. Any valuable ideas are appreciated! Example needed:- $(document).ready(function (){ ...

javascriptajax

The user is defined, but the user's user ID is not specified

It seems that the user is defined, but user.user_id is not. My framework of choice is express.js and passport.js. router.post('/requestSale', function(req,res){ console.log('session user: ' + req.session.passport.user); //logs ...

javascriptexpresspassport.js

Using jQuery to define and apply style attributes

I'm currently working on a script that will add a left and right border to a button in a row of 3 buttons when that specific button is clicked. The goal is for the borders to remain while the button is active, and disappear once another button is clic ...

jqueryhtmlcss

What aspects of MongoDB security am I overlooking?

Is it a secure way to connect to Mongo DB by using Node JS, Mongo DB, and Express? Could someone provide an explanation of this code in terms of security? === Many tutorials often only show... var mongoClient = new MongoClient(new Server('localhos ...

javascriptnode.jsmongodbexpress

"Refine Your Grid with a Pinterest-Inspired

I've set up a grid of images in columns similar to Pinterest that I would like to filter. The images vary in height but all have the same width. The issue arises when a taller image is followed by a shorter one, causing the short image to float right ...

javascriptjqueryhtmlcss

Create a homepage landing page that only displays occasionally

Uncertain about the best way to phrase this question, a Wordpress user requested my help in creating a homepage that can branch off into two sections without loading every time a user visits the "home" page. Imagine visiting xyz.com and being greeted with ...

wordpresshtml

Techniques for preventing background layering using CSS

I have implemented a background image on the <input type="submit"> element to give it the appearance of a button. My CSS code looks like this: input.button { background-image:url(/path/to/image.png); } Furthermore, I would like to display a dif ...

iphonecsssafarifirefox4

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that ...

javascriptjquerycsstwitter-bootstrap

Enhancing button images with gradient effects on hover

I'm currently working on adding a color gradient effect to a PNG graphic used as a button. I specifically want the color gradient to appear only when the user hovers over the image, and not just for background images like most solutions seem to provid ...

htmlcss

Iframe not displaying Base64 encoded PDF in Chrome App

Currently, I am in the process of developing a Chrome App that essentially acts as a wrapper for the main app within a webview. The webview sends a Base64 encoded PDF as a message to the app, which then creates a hidden iframe and loads the PDF into the fr ...

javascriptpdfiframebase64google-chrome-app

Vanishing scrollbar issue with HTML

After examining the code provided, I've almost achieved the desired outcome. The only issue is that there are no scroll bars present. I have identified two potential solutions: 1) One option is to remove the !doctype declaration at the beginning of t ...

htmlcss

Tips for utilizing a dropdown menu in Angular

<div> <label> Categories </label> <select> <option *ngFor = "let category of categories" [value] = "category" (click) = "onCategorySelected( category.name )"> ...

htmlangulardrop-down-menu

Experiencing a WEB3js error in a Vite, React, TypeScript application: Troubleshooting TypeError with callbackify function absence

Hey there, I've been experimenting with using web3 in a React client application (specifically with vite react-ts). When trying to call web3.eth.net.getId(), I encountered an error mentioning that callbackify is not a function. After some investigatio ...

javascriptnode.jsreactjsweb3jsvite

Scraping the Web with Python: Harnessing the Power of Selenium and

Seeking assistance with a problem I've encountered. I'm attempting to extract numbers from a specific website (link provided in the code below). Since the website utilizes JavaScript, my approach involves using selenium to load the page first and ...

javascriptpythonseleniumweb-scraping

What is the best way to pass createdDt and updatedDat values in an Angular form without displaying them on the template?

I am working on a message creation form in Angular where I need to include createdDt and updatedDt as hidden values. These values should not be visible in the template. I want to automatically set the current date and time for both createdDt and updatedD ...

htmlangulartypescriptangular-forms

Issues arise when the condition fails to function correctly during the process of form

I am currently working on a question from my elder brother's question paper, but I am struggling to solve it. The task is to create a form with two text fields, a radio button, and a submit button. The text fields should be named "account number" and ...

javascriptjqueryhtmlformsvalidation

Generate an additional element for each element when clicked, triggering an error warning

When creating a form, I want to display an error message next to each invalid element when the submit button is clicked. Although I am close, the issue is that it adds the span tag twice after the element if two elements are invalid. I need it to be added ...

javascriptjquery

Manipulate a nested array in MongoDB with JavaScript array functions

Having trouble updating a field with mixed types in my mongoose schema. Although I acknowledge this may not be the ideal schema setup, there are specific reasons why it's structured this way. My goal is to perform array-like operations using JavaScrip ...

javascriptarraysmongodbexpressmongoose