My inquiry is as follows:
I currently possess a code that conceals class element 1 when it possesses a specific value (which varies across different sites).
Now, my objective is to also conceal class element 2 ONLY IF class element 1 is already hidden.
Any suggestions on how to achieve this?
Thank you!
An effective approach is to assign a class that can hide both the current element and the following one simultaneously. If you apply the "hideElement1" class to the parent, it will conceal element1 and element2, as well as any subsequent elements. This method is suitable for a limited number of elements; otherwise, employing JavaScript would be more practical.
<div class="parent">
<div class="element1">element1</div>
<div class="element2">element2</div>
<div class="element3">element3</div>
<div class="element4">element4</div>
</div>
<label for="tbx">insert number</label>
<input type="number" id="tbx" name="tbx" value="" />
<input type="button" id="btn" name="btn" value="click to hide" />
<style>
.parent.hideElement1 .element1, .parent.hideElement1 .element2 {
display: none;
}
.parent.hideElement2 .element2, .parent.hideElement2 .element3 {
display: none;
}
.parent.hideElement3 .element3, .parent.hideElement3 .element4 {
display: none;
}
</style>
<script>
var btn = document.getElementById('btn');
var tbx = document.getElementById('tbx');
btn.addEventListener('click', function () {
hideElementbyIndex(tbx.value);
});
function hideElementbyIndex(elementIndex) {
var elementClassNamePrefix = 'element';
var elementsToHide = document.getElementsByClassName(elementClassNamePrefix + elementIndex);
hideAll(elementsToHide);
elementIndex++;
var nextElementsToHide = document.getElementsByClassName(elementClassNamePrefix + elementIndex);
hideAll(nextElementsToHide);
}
function hideAll(elements) {
for (var i = 0; i < elements.length; i++) {
elements[0].style.display = 'none';
}
}
</script>
Make sure to include a CSS style with the property display: none, and then utilize either
element.classList.add('cssclass')remove, or toggle.
The recommended option is to use toggle as it will automatically add or remove the class based on its current presence.
I trust this information proves helpful.
To conceal both an element and the one next to it, you can utilize the "+" selector.
.hiderClass,
.hiderClass + .element {
display: none;
}
What could be causing this unusual behavior when setting line-height to match font-size: While the height of label is 16px, the height of input is 18px... Why is that? If I adjust line-height: 18px or higher, the heights suddenly align. But why does this ...
body{ font-family:'Montserrat'; } .content{ background-color:#d9d9d9; } p.dates{ display:inline-block; font-weight:800; margin-right:20px; width:120px; text-align:center; margin-top:0; margin-bott ...
Below is a script that rotates two images in opposite directions when clicked. One image spins clockwise while the other spins counter-clockwise. The challenge is that each image requires an individual click to rotate. My goal is to make both images rotate ...
I'm currently attempting to implement a v-data-table with fixed header and footer. However, I've encountered an issue where if I set the table height to be larger than the row height, the table takes on the defined height and the footer ends up b ...
I have a table with the following styles applied: width: auto; min-width: 98.5%; When viewing in Chrome, the table inside a div appears to only be about 50% of the width of the containing div. However, in IE9, the table occupies the full width. Checking ...
Currently working on a game project that involves layering multiple images (tiles) on top of each other to create a sense of depth. However, I have encountered an issue when attempting to click on these overlapping tiles. Due to their transparency, click ...
I have a vision for a webpage layout that will feature two columns in landscape mode and switch to one column in portrait mode. Here is an outline of what I have in mind: Landscape: <body> <div class="container-fluid"> <div cl ...
Seeking assistance: I've been struggling with a problem for quite some time now and could really use some help from you guys. My issue involves an 'AngularJS' webapp that retrieves posts from an 'FB page' via 'OpenGraph' ...
I want the <body> element's background-color to change every 500px as I scroll down. I've scoured the web for answers, but still can't figure out what's going wrong. Please review the code. However, Firefox Browser indicates that ...
My chrome extension enhances facebook chatbox with jquery autocompletion. I am trying to make the suggestion list menu horizontal by modifying the jquery-ui.css. When changing display:block to display:inline, the list becomes horizontal in a local HTML fil ...
At what point should one consider using max-height or max-width for an image? Is it beneficial if I refrain from mentioning the specific dimensions of the image due to uncertainty? ...
I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...
I'm struggling to articulate what I need, but I'll give it a shot. I want to vertically align three different elements, each wrapped in their own divs. This is my current code: .service_info { margin-top: 45px; clear: both; ...
I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...
I am facing a challenge with implementing custom controls on a video embedded in my webpage. I have tried setting a div to absolute position for the buttons, but they are not clickable. Is there a way to achieve this without using jQuery? I need the butto ...
Here .header { display: flex; font-family: monospace; background: papayawhip; align-items: center; justify-content: space-between; margin-left: auto; } ul { display: flex; background: papayawhip; gap: 10em; list-style-type: none; f ...
I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...
I'm having trouble getting the bootstrap-slider.js library from to function correctly. All I see are textboxes instead of the slider components. You can view an example at I have verified that the CSS and JS files are pointing to the correct direc ...
I am currently diving into the world of front-end web development and I am having some trouble grasping the concept behind the behavior of body::before. Below is a snippet of my CSS code: body::before { content: ""; position: fixed; width: ...
I created a sidebar containing links and I am attempting to add space between each link. Here is the code snippet I have tried: .sidebar-nav>li>a{ padding-bottom: 500px; } Unfortunately, this code is not producing the desired result. Are there any ...