I encountered an issue where I need to conceal all divs within a parent div except the first one. The challenge is that these divs do not possess any unique identifiers.
Is there a way to achieve this task using CSS or pure JavaScript?
<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>
Your guidance and advice on this matter would be greatly appreciated :)
To implement this, you can utilize the nth-child selector:
.slds-form > div:nth-child(n + 2) {
display: none;
}<div role="list" class="slds-form>
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>Here's a solution that may work for you:
You can use a combination of child selection (
:first-child) and:notto achieve the desired outcome.
.slds-form > div:not(:first-child) {
display: none;
}<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hidden</div>
<div class="slds-grid">Hidden</div>
</div>I hope this information was helpful to you.
To achieve the desired effect, you can utilize the :not(:first-child) selector:
.slds-form>div:not(:first-child) {
display: none;
}<div role="list" class="slds-form">
<div class="slds-grid">Visible</div>
<div class="slds-grid">Hide</div>
<div class="slds-grid">Hide</div>
</div>You have the option to include an additional class for toggling show and hide functionality.
.slds-hide {
display: none;
}
.slds-show {
display: block;
}
<div role="list" class="slds-form">
<div class="slds-grid slds-show">Visible</div>
<div class="slds-grid slds-hide">Hide</div>
<div class="slds-grid slds-hide">Hide</div>
</div>
Recently, I attempted to create a fullscreen webpage like this one: My goal was to have the color of each element change randomly every second. Here is the JavaScript code I implemented: <script> var tid = setInterval(chngColor, 1000); ...
I'm struggling to center my container on the website. My goal is to have it centered and take up about 80% of the page so I can incorporate an image slider and text inside. Using margin: 0 auto doesn't seem to be achieving what I want. The backgr ...
Is there a way to achieve the functionality seen in apps like Discord, where users can type into the message box even when it's not in focus? I am interested in implementing this feature only if no other input field on the page is currently focused. ...
I am facing an issue with making ajax calls on focus for each text input. I am able to do it on the first page, during document ready event. However, when I navigate to another page, JavaScript is unable to parse the inputs as they were not created during ...
Sorry for the easy question, but I'm having trouble getting the BoxGeometry to show up in the scene. The red background is displaying correctly. var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(0, window.innerWidth / window.inn ...
I have been working on setting up my first mongo-db application to connect to the server. However, I am encountering a specific error during this process: const express = require('express'); const mongoose = require('mongoose'); const ...
const express = require('express'); const app = express(); app.use('/', anyroute); // in anyroute file router.route('/:id').get(controlFunction) controlFunction(req, res, res)=> { // Here we can get the "id" fr ...
I need help comparing two similar code snippets: myFunc(); function myFunc() { var e = document.getElementByClassName("link"), i = e.length; while (i--) { e[i].addEventListener("click", function() { //do stuff for each ...
We have implemented a wrapper in our code base for handling ajax calls using jQuery. The purpose of this wrapper is to make it easier to eventually switch away from jQuery, if needed, by isolating all ajax-related calls. Below is the definition of the wrap ...
I am struggling with adding padding to the sidebar using bootstrap-vue. When I attempt to add padding in the browser devtools, it works perfectly fine. However, when trying to implement the same code, it doesn't reflect on the actual webpage. I tried ...
I've attempted to use FindElementByName but I keep getting a no such element error when it should recognize this name. What am I overlooking? This issue is occurring on the website Intacct.com. Despite my efforts, I have been unable to find a unique C ...
C# foreach (DataRow Row in oDs.Tables[0].Rows) { LitPreferances.Text += "<Li ID=LI_" + Row["pk_Preference_Branch_ID"].ToString() +"_"+ Row["pk_Preference_BranchType_ID"].ToString() +">" + Row["Branch_Name"].ToString() + " < ...
Would like to place a .well div (or a button, whichever works best) within the designated green area shown in this image: here Here is the code I currently have: <div class="container-fluid"> <div class="row row1" style=&q ...
How can I hide a form based on a specific session being set? Here is my approach: <form action="" method="post" <?php if ((isset($_SESSION['start']) )|| (isset($_SESSION['visitor']) )){ echo 'style="display:none;"'; } ? ...
Is there a way to generate widgets from HTML scripts on a webpage? For example: <script type="text/html" id="widget-simple"> <div class="widget-simple"> This is my widget and its name is {{ test }} </div> </script> & ...
I have a design layout like this: Click here to view the image My auto-centered content is styled with the following CSS: width: 960px; margin: 0px auto; Within this auto-centered content, there is a DIV element that needs to span the full width of the ...
I am currently working on a webpage and I want to restrict access to only users with the username "teacher". I came across this code snippet: <?php session_start(); if(!isset($_SESSION['uname'])){ header('location:(main p ...
I'm encountering an issue with accessing my C# WebMethod in the code behind, resulting in a 500 internal server error. I cannot figure out why it's not working, so any assistance in identifying the problem would be highly appreciated. Even when ...
:image => StorageRoom::Image.new_with_filename(path) When trying to retrieve the image path, I initially specified it manually and it worked fine. However, after deploying to Heroku, an error message 'Load Error - No such file present' is dis ...
Currently, I am working on implementing a feature for aborting a multiple file upload process while also displaying the progress of the upload with a progress bar. My objective is to ensure that when the user clicks on the abort button, not only does the ...