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

Tips for creating $http calls in AngularJS

Having some issues with my code, as I'm unsure of the correct placement for making an $http request to a local server. api.js var express = require('express'); var router = express.Router(); var mongoose = require('mongoose'); va ...

javascriptangularjsnode.jsexpress

Attempting to eliminate the mouseleave event by utilizing the jQuery off function

I have a set of buttons in an array and I want to remove the event listeners for each button once it has been clicked. Here is my current approach: JavaScript: var currentButton; var selectedButtons = $("#moto-menu a"); function onEnter(){ TweenMax. ...

javascriptjqueryhtml

The HTML element in the side menu is not adjusting its size to fit the parent content

Update: What a day! Forgot to save my work... Here is the functioning example. Thank you for any assistance. I have set up a demo here of the issue I'm facing. I am utilizing this menu as the foundation for a page I am developing. The menu is built ...

jqueryhtmlcsstwitter-bootstrap

``There seems to be a problem regarding the alignment of elements in

Having some trouble with centering the grid on my simple website. As a beginner in Bootstrap, I'm seeking guidance. Will be grateful for any help you can offer! Please bear with me as I learn. <html> <head> <meta charset="utf8"/& ...

htmltwitter-bootstrapcss

What is the reason behind Firefox's disregard of CSS font-size for code tags within pre tags?

There seems to be a discrepancy in how different browsers on Mac OS X 10.11.4 handle font-size. Is this an issue with Firefox, a CSS bug, or am I missing something about CSS? Here's a JSFiddle where you can see the details. In a section like this: &l ...

htmlcssfirefoxfonts

`Make Bootstrap 5 Modal centered horizontally`

I'm facing an issue with my Vue application where the Bootstrap 5 modal is not horizontally centered on desktop. Below is the code snippet of my component: Modal.vue <template> <teleport to="#modal-container"> <div ...

htmlcsstwitter-bootstrapvue.jsbootstrap-modal

Unable to smoothly expand Div in React using Tailwind

I'm facing a challenge in animating a div that contains input elements. I want it to expand smoothly - initially, the text area is small and the other two inputs and buttons are hidden. When clicking on the text area, the input and button should be re ...

javascriptreactjsnext.jstailwind-cssframer-motion

After a brief pause of x seconds, continue forward without the AJAX response

I have a jQuery Ajax snippet that calls a CHAT functionality. I would like to introduce a 2-second delay before displaying the output when response.available is not equal to 1 in the Ajax response. How can I achieve this using a setTimeout function? See ...

jqueryajax

Unable to utilize the full column space provided by bootstrap

I need assistance in making three buttons span the entire width of a column. The grid consists of 3 sections for the buttons and 9 sections for other components. Here's a visual reference. Essentially, the buttons should take up the space highlighte ...

htmlcssreactjsbootstrap-4material-ui

What steps can be taken to resolve the delay in transition when clicking on "read less

I implemented a transition effect for the Read More and Read Less buttons, however, there seems to be a delay on the transition when clicking on the Read Less button. This delay was not intentionally set by me. How can I resolve this issue and also apply a ...

javascriptcssreactjs

Creating a Dynamic Form in Google App Engine

I need guidance on how to implement a form that communicates with the server in an AJAX manner when the submit button is clicked. The goal is to display information retrieved from the server on the same page. Specifically, I am looking for assistance on ac ...

jqueryajaxgoogle-app-engine

Finding the Ideal Location for Controllers in an Express.js Project

I'm relatively new to software development and one concept that I find challenging is organizing the directory structure of various projects. As I prepare to embark on an Express project, I prefer keeping controller classes separate from route callbac ...

javascriptexpress

What is the best location to create the content for a sidebar?

Currently in the process of building my new website using express. The layout consists of various "sections" such as a blog, project information, and more. I want to have a unique sidebar next to the main content for each section. For instance, in the "blo ...

javascriptmodel-view-controllernode.jsexpress

AngularJS factory or filter failing to update properly

I have been working on a system that manages translations in my factory. I set the language as a string and then use a filter to update the view when the language changes. Everything works fine if I define the language in the view beforehand, but when I t ...

javascriptangularjs

Is it possible in Angular to generate a module and component without including a CSS file in a single command?

Is it possible to generate a Module linked to a component without automatically creating a css file? For example, the default method I've been using involves: ng generate module name / ng generate component name This results in the typical componen ...

javascriptnode.jsangularnpm

Differences in <img> sizing behavior between Chrome and Firefox

Objective: Develop a scrollable image-gallery web component with layouting that functions without script intervention. Specifications: The size of the web component must be fully responsive and/or adjustable. The top main area of the widget is the galle ...

cssimageflexboxgalleryimage-size

If the font size exceeds a certain value in SCSS, then apply a different value

Can SCSS handle this scenario? I am looking to set the font size to 22px in case it is greater than 30px, especially within a media query for a max width of 480px. ...

csssass

How do I sort a list of items by their class using jQuery and PHP?

Apologies for any language barriers, I hope to effectively communicate my issue... Currently, I am endeavoring to enhance my development skills and have encountered the following code : <ul> <li class="odd ajax_block_product {if $smarty.fore ...

phpjquerylistsmartyreorderlist

Activate the Bootstrap Jquery/Ajax inline editing feature by simply clicking on the Edit button

Seeking recommendations for a way to implement inline editing. When the edit button is clicked, I want the label's content to be replaced with an input text field that can be updated in my MySQL database. This is what my code looks like: <label s ...

javascriptjquerymysqlajaxtwitter-bootstrap

Develop a JavaScript application that contains a collection of strings, and efficiently sorts them with a time complexity of O(nlog n)

Seeking assistance in developing a JavaScript program that contains an array of strings and must sort them efficiently in O(nlog n) time. Grateful for any guidance... ...

javascriptarrayssorting