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;
}
Important: The height of <div> is set to 50px, and the line-height of <span> is also 50px When 'line-height' is not applied to the <span>, all elements align at the top of the parent. However, when 'line-height: 50px&apo ...
I am currently working on implementing a message box feature on my website. When a user clicks on the inbox icon, I want a messages box to appear, similar to how stackoverflow handles it. Stackoverflow achieves this by placing a div outside the ordered lis ...
Upon initial load of my website, if the page is maximized or in fullscreen mode, the comBrand div will have specific CSS properties applied. However, during a resize event, I use the .css() function to adjust the properties of this element so it doesn&apos ...
I need help figuring out how to center a list of items on the page, but have them aligned left. I am using bootstrap. I want the text to be in the center of the page but aligned left. <ul class='text-center'> <li class=& ...
I encountered an issue with displaying a DataTable - contextMenu when it is placed within a TabView. The contextMenu was appearing off-center. However, the DataTable - contextMenu worked perfectly fine when it was not wrapped in a TabView. To address this ...
After inputting the less code below into : @item-width: 120px; @num-cols: 3; @margins: 2 * 20px; @layout-max-width: @num-cols * @item-width + @margins; @media (min-width: @layout-max-width) { .list { width: @layout-max-width; } } The resul ...
I'm looking to create an HTML table with a fixed header and fixed first column, but I want to avoid using JavaScript or jQuery to set scrollTop/scrollLeft for smooth functionality on mobile browsers. I found a solution that fixes the first column he ...
The issue arises when the contact form overlaps with the footer. When testing the code on Codepen, the styles are correctly linked and working for everything except the contact form. I have attempted adjusting the padding, bottom position, etc., but nothin ...
In my quiz, I have set up variables that start at 0 and increase based on certain conditions. One variable should increase when a question is answered correctly, while the other should increase when a question is answered incorrectly. If you answer a quest ...
Behold my unique and straightforward footer design (100% zoom above, 70% zoom below) : To keep things simple, I aimed to center content with a single div having a fixed width and margin: 0 auto, all while maintaining the same color for the outer footer la ...
Whenever the user hovers over an image, an information box appears regarding that specific image. The information inside the box changes as I move over another image, but when not hovering over any images, the information box remains visible. Unfortunately ...
My goal is to effectively utilize the scroll-snap-type property I'm struggling to understand why this code functions as intended html, body { scroll-snap-type: y mandatory; } .child { scroll-snap-align: start none; border: 3px dashed blac ...
I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: And this is how I want it to appear: Is there a way to achieve the desired layout using Bootstrap's Grid or Flex Layout? Here i ...
Currently, I am facing a puzzling issue where my CSS rules seem to be losing precedence on a page loaded via AJAX. Despite placing my custom CSS file last in the main page, allowing it to take precedence over any bootstrap styles, after loading new content ...
This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...
My issue lies in figuring out why my filter function isn't properly working for toggling li elements. JavaScript: $("#searchbox1").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#menulist li") ...
I have a CSS grid with two rows and two columns (refer to the code snippet). Is there a way to make all the items in the grid maintain the same width without specifying it individually? Are there any css-grid properties that can ensure consistent widths ...
I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, ...
When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...
I am trying to style two inner divs within a containing div by floating the first one to the left and the second one to the right. Additionally, I want to add a margin of 15px on the left for the first div and on the right for the second div. The challenge ...