I am attempting to conceal specific tags by utilizing a single ID element, but it appears that it only hides the first tag associated with the ID element I used.
Here is a demonstration: http://jsfiddle.net/mgm3j5cd/
How can I resolve this problem? I want to hide only the tag with the ID element that I have specified. Thank you for any assistance.
This code snippet is specifically tagged as CSS, so you can utilize the following CSS in the stylesheet of your page:
#hide {
display: none;
}
Additional Note:
If you prefer to exclusively use JavaScript, there is an alternative method available. It is important to note that having multiple elements with the same ID in your document makes it technically invalid, and this solution may not be supported in all browsers. (Tested in Firefox 32).
Functional JSFiddle Example: http://jsfiddle.net/88yw7LL9/2/
function hideByID(string) {
var element = document.getElementById(string); // get the first matching element
var array = [];
while(element) {
array.push(element);
element.id = string + '-processed'; // change the ID for the next matching element
element = document.getElementById(string);
}
for(var i = 0; i < array.length; i++) {
array[i].id = string; // revert the ID to its initial state
array[i].style.display="none"; // hide the element
}
}
hideByID('hide');
To easily conceal specific elements, it is recommended to give them a 'class' attribute, like so:
.XXXX
{
display:none;
}
If you prefer to target elements by their IDs, you can do so like this:
#id1 , #id2
{
display:none;
}
Alternatively, for a more precise selection, you can use this syntax:
div#id1 , div#id2 //more accurate
{
display:none;
}
It's important to note that you cannot hide multiple elements using just one ID.
(Attempting to modify CSS properties within a Chrome extension content script) Is it feasible to override CSS properties that have been marked as !important on the webpage? For example, if I aim to eliminate an important border: $(".someclass").css(&apo ...
When the left div's content exceeds the right div's, it spills over into the next container div. Sample HTML: <div class="musictemplate_container"> <div class="musictemplate_left"> something<br> omething< ...
Initially, everything was working fine with this code when I was using a JavaScript window prompt to input the length. However, I decided to switch it up and use an if statement along with a dropdown window in the HTML, and now it doesn't seem to be w ...
While reviewing the Tailwind documentation on custom media queries, I came across an interesting option to create a fully custom breakpoint using the 'raw' key. After adding this to my configuration file, I noticed that when I saved the file, Pr ...
For my project, I am utilizing a Grid layout to display 5 items per row. https://i.sstatic.net/PW6Gu.png Upon clicking on an item, my goal is to have the item detail enlarge by increasing the size of the HTML element. https://i.sstatic.net/nGj8l.png Is t ...
Simply put, I am trying to determine the total scroll size for a text area in a unit that scrollTop can align with. However, I am at a loss on how to do so. I've tried scrollHeight and various other methods without success. Any advice or suggestions ...
In order to achieve a specific task, I need to display 12 items in 4 columns with 4 items each. Initially, only the first four items are visible and the rest are hidden until the user clicks the "Show More" button. Upon clicking the button, the next row ...
Hi there, I am working on my website and trying to create a smooth transition between sections similar to the one demonstrated here:. The challenge I'm facing is that the backgrounds of my sections cannot be fixed; they need to have background-attachm ...
I am attempting to change the color of only the text "select one option" to grey, but I am having trouble making it work. Here is my code: .grey_color { color: #ccc; font-size: 14px; } <select id="select"> <option selected="selected"> ...
Objective My goal is to insert a portion of HTML into a web page. Issue The page is not displaying properly with the desired styling and layout. I have a specific page that must be written in plain HTML rather than Jade, although I will still be usin ...
Is it possible to create an inner border with unique values for each side? For instance: Top: 20px Right: 80px Bottom: 40px Left: 10px Can you provide an example of how this can be achieved? Thank you! :) ...
<Autocomplete {...defaultProps} id="disable-close-on-select" disableCloseOnSelect renderInput={(params) => ( <TextField {...params} label="disableCloseOnSelect" variant="standard" /> )} /> Click h ...
Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...
I am currently developing a Django website to enhance my skills in coding, CSS, Html, and Bootstrap. However, I am encountering an issue with the main page of my site. The visuals on my cards do not align properly with the colored boxes at the top of the p ...
When creating a new page, how exactly does it work? For instance, on a website that allows users to create posts, you may see a link like this: example.com/post/randomised123 I'm curious - does this process also involve server directories like pop ...
Utilizing angular's ng-repeat along with orderBy on a product catalog page to sort the products based on a select change. The ordering by name using orderBy works as expected, however, when it comes to price it sorts like this: 1,10,11,12,13,14,2,3,4 ...
Encountering a 400 error when attempting to upload a file and send other form elements to Flask from HTML. Tried using AJAX, but it also gives me an error. Python: @app.route('/prod_diff_result', methods=['POST']) def prod_diff_result ...
I have a jQuery script that swaps out a div when a href="#1" is clicked. The same link, a href="#1", is then replaced by a href="#2" and vice versa. Here is the jQuery code: $('.child2, a[href="#1"]').hide() $('#replacepagelinks a').c ...
Just a heads up - I'm not familiar with HTML/CSS/JS. This template is pre-made, and I'm simply making some adjustments to it. Hello, I'm currently working on my portfolio website and I want to display my projects based on the programming la ...
I am currently in the process of gaining a better understanding of the Google web applications. The HTML source I am looking at contains JSON data that has been encoded in a way that is unfamiliar to me and I am seeking to decode it. The HTML source includ ...