I am having trouble displaying all the div elements with the same #id simultaneously

Click here for the code snippet

The code provided seems to have a problem where hello2 and hello3 are not displaying. Is this issue related to the fact that '#id can only be used once'? Making it a class does not seem to work either. How can this be fixed?

Here is the HTML:

<a href="javascript:unhide('menu');">Toggle</a>

<div id="menu" class="hidden">hello</div>
<div id="menu" class="hidden">hello2</div>
<div id="menu" class="hidden">hello3</div>

CSS:

.hidden {
    display: none;
}
.unhidden {
    display: block;
}

JavaScript:

function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
    }
}
javascriptjqueryhtmlcss

Answer №1

Each identification number needs to be unique.

Consider using the following code snippet:

HTML:

<div class="invisible">hello</div>
<div class="invisible">hello2</div>
<div class="invisible">hello3</div>

JS:

$(document).ready(function(){
    $("a").click(function(){    
        $("div").toggleClass("invisible visible");
    });
});

Check out this live example on JSFiddle.

Answer №2

Here is a great solution using jQuery. By replacing the id with another unique class, you can achieve the desired result. Take a look at the code below to understand how it works.

HTML

<a href="#">Toggle</a>

<div  class="xClass hidden">hello</div>
<div  class="xClass hidden">hello2</div>
<div  class="xClass hidden">hello3</div>

JQUERY

$("a").click(function(){

    var xObj = $(".xClass");

    if(xObj.hasClass("hidden"))
    {
        xObj.removeClass("hidden").addClass("unhidden");
    }
    else
    {
        xObj.removeClass("unhidden").addClass("hidden");
    }

});

DEMONSTRATION

Answer №3

Have you considered nesting all your divs within a parent div for better organization?

http://example.com/abcdefg123/

It could be more logical to group the menu and items inside one main container (perhaps using anchors instead of nested divs within the menu).

This approach may eliminate the need for jQuery, especially if you are unfamiliar with its functionality.

<div id='main-menu' class='hidden'>
  <a href='#'>menu</a>
  <a href='#'>menu2</a>
  <a href='#'>menu3</a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

useEffect not triggering when the orientation is updated

I am experimenting with adjusting the height of a container specifically for mobile landscape mode. While using the developer tools to simulate changing the orientation of a mobile device, I noticed that this adjustment only works on the initial rendering. ...

javascriptreactjsreact-hooks

Issue encountered: Ajax fails to function correctly when parameters are included in URL

I am encountering an issue with ajax. The code is functioning correctly on this URL , but not on this Ajax seems to return no results on URLs with parameters, while it works perfectly fine on others. I have been unable to identify the source of the proble ...

javascriptphpmysqlajax

The onClick event for the OnButtonSubmit function seems to be malfunctioning in ReactJS

When attempting to utilize the onClick event for a button in React, my goal is to simply have it log "clicked" in the console. However, this functionality is not working as expected. The Component where the onClick event is being called looks like this: ...

javascripthtmlcssreactjsonclick

Which tools are best suited for Xamarin development?

Recently, I've been contemplating how to style my app. One common approach is using CSS, but the question that lingers in my mind is whether it's truly compatible and if I should begin utilizing CSS. Is there perhaps a different language that wou ...

androidcssiosxamarinstyling

Scrolling horizontally within SVG graphics

Check out this JSFiddle body { background-color: #111111; color: #ffffff; /*max-width: 100%;*/ overflow-x: hidden; } .row { max-width: 100rem; } .svgrow { min-width: 70rem; } .svgrow svg { overflow-x: auto; } I am trying to ma ...

htmlcsssvgzurb-foundation

Leverage React.JS to iterate through arrays and objects, rendering data seamlessly - even within nested objects

Development of Category's Filter component Implementing the rendering of data from a nested array using React Js Although I attempted to render it as seen below, it is not displaying anything The main focus is on the rendering part only var selecte ...

javascriptreactjsjsonnext.js

How come my footer is appearing at the top of my webpage?

I have encountered a problem where the footer is displaying on top of my page, despite not using any floats, wrappers, or grids in my code. The code snippet can be found below this text. Could someone assist me in identifying why this issue is occurring ...

htmlcssfooter

Checking for an existing alert in JavaScript

In my development of a Blackberry Webworks (HTML5) app, I am running multiple methods simultaneously in the background. If any of these methods happen to fail, an alert is triggered using the alert() method in JavaScript. However, if both methods fail, two ...

javascripthtmlblackberryalertblackberry-webworks

Error in Mongoose validation: "Please provide a value for the 'first' field and the 'last' field."

Another user has previously posted a similar question, but I'm still struggling with my MongoDB website. I am working on a project to store names using mongoose. Here is the code for my routes and models: const router = require("express").Router(); c ...

javascriptnode.jsmongodbexpressmongoose

The dynamic form is programmed to display identical values for both the initial and subsequent inputs

Currently, I am developing a personalized dynamic form utilizing the Material UI library as the component for my React Js application. You can find more information about this library at https://mui.com/. In front of you is the initial setup of the dynami ...

javascriptreactjsreact-hooksmaterial-ui

What is the reason that elements with % properties totaling 100% do not align next to each other?

I've been attempting to arrange two blocks side by side within another block, but they just don't seem to fit together smoothly. What could be causing this issue? .container {height: 200px; width: 400px; background:darkgrey;} .left {height: 100% ...

htmlcss

The shadow effect of CSS applied to a div is obscured by surrounding div elements

I need help with a design issue. I have two boxes stacked vertically, and I want the top box to have a shadow on its bottom edge. However, the shadow is currently hidden behind the bottom box. Does anyone know how to solve this problem? ...

htmlcss

Guide to dynamically resizing the Monaco editor component using react-monaco-editor

Currently, I am integrating the react-monaco-editor library into a react application for viewing documents. The code snippet below showcases how I have set specific dimensions for height and width: import MonacoEditor from 'react-monaco-editor'; ...

javascriptreactjstypescriptmonaco-editor

MUI full screen dialog with material-table

Issue: When I click a button on my material-table, it opens a full-screen dialog. However, after closing the dialog, I am unable to interact with any other elements on the screen. The dialog's wrapper container seems to be blocking the entire screen. ...

javascriptreactjsmaterial-ui

Ways to track activities involving a specific input element

Currently, I'm dealing with an input field within an ASPX page utilizing minified JavaScript. Unfortunately, I do not have access to the C# source code for this particular page as it is not publicly available. However, I can still make changes to the ...

javascriptc#html.netjson

Is there a way to modify the HTTP response code of a PHP page based on a specific condition determined by the response of an AJAX call in jQuery?

When calling a page on my search page using ajax, I receive JSON data. I am trying to set the HTTP response code of the page based on the results. If the keyword is found, I want to keep the default response code. However, if it is not found, I want to cha ...

javascriptphpjqueryajax

issue with useReducer not functioning as expected

I encountered an issue with my customized Select component. It includes a select and options while listening for onChange events. Additionally, I am using a useReducer function that initializes some variables. However, even after selecting an option, the s ...

javascriptreactjs

Is the incomplete response from an Ajax request due to limitations?

I am currently utilizing an AJAX request on an HTML file in order to retrieve its code. (I have discovered that the type:"Get" is not necessary, as it does not affect the outcome) jQuery.ajax({ type: "GET", url: "page-2.html", dataType: "html ...

javascriptjqueryajax

When organizing data, the key value pair automatically sorts information according to the specified key

I have created a key value pair in Angular. The key represents the questionId and the value is the baseQuestion. The baseQuestion value may be null. One issue I am facing is that after insertion, the key value pairs are automatically sorted in ascending ...

javascriptangulartypescript

Using jQuery to compare the output of a function with another result

My goal is to analyze a list of links and extract the last section of each URL in the href attribute. After that, I want to compare it with the current page's URL. I have a collection of pages stored in a folder named Projects. Specifically, if the U ...

jquery