My goal is to conceal elements 1, 3 and 2 & 4 without changing their position.
div{
width: 10%;
float: left;
}<div style="background-color: blue"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>By using the visibility: hidden property, the element will still take up space on the page but will not be visible:
div {
width: 10%;
float: left;
}
div:nth-child(1),
div:nth-child(3) {
visibility: hidden;
}<div style="background-color: blue">
<p>1</p>
</div>
<div style="background-color: yellow">
<p>2</p>
</div>
<div style="background-color: red">
<p>3</p>
</div>
<div style="background-color: green">
<p>4</p>
</div>Using 'visibility: hidden' to hide elements without affecting layout, giving white spaces instead of removing the element completely. It is recommended to use classes or IDs for accurate results.
div {
width: 10%;
float: left;
}
.blue{
visibility:hidden;
}
.red{
visibility:hidden;
}<div class="blue" style="background-color: blue">
<p>1</p>
</div>
<div class="yellow" style="background-color: yellow">
<p>2</p>
</div>
<div class="red" style="background-color: red">
<p>3</p>
</div>
<div class="green" style="background-color: green">
<p>4</p>
</div>To make the elements invisible without affecting other div positions, you can set their opacity to 0.
.box{
display: flex;
}
.blue{
opacity: 0;
}
.red{
opacity: 0;
}<div class="box">
<div class="blue" style="background-color: blue"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div class="red" style="background-color: red"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>
</div> As mentioned by @Lalalena in a comment, you have the option to utilize visibility:hidden
div{
width: 10%;
float: left;
}
.hidden{
visibility: hidden;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
.green{
background-color: green;
}<div class="blue hidden"><p>1</p></div>
<div class="yellow"><p>2</p></div>
<div class="red hidden"><p>3</p></div>
<div class="green"><p>4</p></div>div{
width: 10%;
float: left;
}<div style="background-color: blue; visibility:hidden;"><p>1</p></div>
<div style="background-color: yellow"><p>2</p></div>
<div style="background-color: red; visibility:hidden;"><p>3</p></div>
<div style="background-color: green"><p>4</p></div>;
The visibility CSS property allows you to show or hide an element without affecting the layout of a document.
If you're looking to switch colors with buttons, here's a simple example that uses buttons to toggle the visibility of different color groups. The inline CSS has been reorganized for cleaner HTML and simpler JavaScript usage. You can find links to MDN documentation at the end of this answer.
// Cache the containers, and add a listener to the
// buttons container
const colors = document.querySelector('.colors');
const buttons = document.querySelector('.buttons');
buttons.addEventListener('click', handleClick);
// When a child in the buttons container is
// clicked (see event delegation below)...
function handleClick(e) {
// ...first check it's a button
if (e.target.matches('button')) {
// ... destructure its id from the dataset
const { id } = e.target.dataset;
// ... and use the id to toggle those elements
// in the colors container which have a `color` class
// and a class that matches the id
// (using a template string to create the selector)
colors
.querySelectorAll(`.color.${id}`)
.forEach(color => color.classList.toggle('hidden'));
}
}.colors { display: flex; width: 60%; justify-content: left; align-items: center; }
.color { width: 20%; text-align: center; border: 2px solid white; }
.red { background-color: red; }
.blue { background-color: lightblue; }
.yellow { background-color: yellow; }
.green { background-color: lightgreen; }
.orange { background-color: orange; }
.pink { background-color: pink; }
.hidden { visibility: hidden; }
.buttons { margin-top: 1em; }<div class="colors">
<div class="color group3 pink"><p>1</p></div>
<div class="color group1 blue"><p>2</p></div>
<div class="color group2 yellow"><p>3</p></div>
<div class="color group1 red"><p>4</p></div>
<div class="color group2 green"><p>5</p></div>
<div class="color group3 orange"><p>6</p></div>
</div>
<div class="buttons">
<button data-id="group1">Toggle group 1</button>
<button data-id="group2">Toggle group 2</button>
<button data-id="group3">Toggle group 3</button>
</div>For more information, refer to the following resources:
Hey there, I'm pretty new to frontend development so please excuse me if this is a silly question :) I know that it's not usually done, but when you apply line-height to an element like an h1, it adds extra space both on the top and bottom of th ...
After successfully submitting a form in AJAX using POST, I receive a new form that needs to be automatically submitted in jQuery. However, for some reason, the .submit() function seems to be ignored and I can't figure out why. I've tried adding ...
I currently have the following code: .fiftyFiftySection { background-color: #000; } .odometer { font-size: 3em; text-align: center; } table td { column-width: 1000px; text-align: center; } @media (max-width: 500px) { table td { column ...
I am facing an issue where the state doesn't change from active to inactive or vice versa when I click on it. Below is my code for ajax: <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> ...
Despite receiving a 200 green response, my data is still not getting written to the json file and it remains blank. The JavaScript: $(function() { $('form#saveTemp').submit(function() { let savdAta = JSON.stringify($('form#save ...
const fileStorage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, "images"); }, filename: function (req, file, cb) { cb(null, uuidv4()); }, }); const fileFilter = (req, file, cb) => { if ( file.mi ...
I send a json array to the MVC Action using either JQuery or Ajax, and the Action processes the request correctly. However, when the MVC Action returns a View, I am unsure of how to redirect to this View or replace the body with it. Overall, everything se ...
I'm attempting to create a canvas line diagonally above two textboxes that are also positioned diagonally (similar to Samsung's pattern passcode) when a button is clicked, but I am facing difficulties in achieving this. I have attempted to solve ...
I am struggling to populate an HTML table with data formatted as an array of arrays. Despite my efforts in writing the code, the data is only showing up in a single row. I have tried mapping the data in a nested loop but I am unable to implement it correct ...
I'm currently working on a project that requires implementing custom-style tabs. I'm facing challenges in customizing the borders of the tabs, particularly rounding the red bottom border and adding space between the right border and bottom border ...
I am currently working on pulling journal data from the CORE API in React, specifically focusing on obtaining the title and URL of each journal. My goal is to create clickable links that direct users to the specified URLs. { "identifiers": [ ...
Creating a Meteor app for the internal use of a company, I have designed it to track people and enable managers to assign tasks to various employees. Given the small size of the data being utilized, I anticipate that the database will not grow significantl ...
My current task involves selecting an image through an HTML Input and then retrieving the image using Javascript to obtain its Base64/Image Data string. However, the code I have implemented is only returning a partially corrupt or invalid representation o ...
When pasting text into an image in this example, everything looks fine at first. However, as the browser width is reduced, the text starts slipping out of the picture. To make matters worse, unsightly line breaks are also added. Is there a way to prevent ...
My goal is to retrieve data through AJAX without formatting it as JSON, so I took the initiative to encode it myself. The data I am working with consists of client records: where the pound sign (#) separates the client records, the pipe sign (|) separates ...
Currently, I am in the process of learning React and trying to grasp its concepts by practicing. One exercise I decided to tackle involves deleting an element from an array when a user clicks on it in the UI. Below is the code snippet that I have been work ...
My coding structure appears as follows: <article> <header> <hgroup> <h1>Foo </h1> <h2>Bar</h2> <h3>1337</h3> </hgroup> </header> <table> ...
Struggling to incorporate a Drag and Drop feature on vuetify v-textarea. Encountering an issue where clicking on the v-textarea results in the value from a dropped component being removed. Unsure if it's a flaw in my code or a limitation in vuetify v- ...
I have a component that iterates over an array to generate 10 navigation items. I want to implement an onClick method that will add an active class to the clicked item. Are there any best practices using Hooks or the newer React patterns for achieving this ...
UPDATE: Reproducible issue https://github.com/ganavol409/next-material-ui-classes-bug Issue seems to be related to Higher Order Components and importing useStyles from Material UI Implemented Solution: https://github.com/mui-org/material-ui/blob/master/ ...