I have successfully configured the div to show only one at a time, however, I am currently facing an issue with turning off the div

My goal is to disable all annotations within a specific div class and then enable just one particular ID afterwards. This method is meant to ensure that only one annotation can be open at any given time. However, I have encountered an issue with the Javascript code - while it successfully allows for only one annotation to be open simultaneously, there seems to be a problem with closing the annotation by clicking on it. Any suggestions on how I could resolve this issue?

Below is an example text containing links to annotations:

<div class="text">Here is some text. 
In this text there are links <a href="#" class=annoa onclick="myAnnotation(1)">here</a> 
and there are links <a href="#" class=annoa onclick="myAnnotation(2)">there</a>. 
And there are probably many more! 
Each link opens its own annotation on the side.</div>

Here are the actual annotations:

<div class="annotation" id="an1">I'm the first annotation!</div>
<div class="annotation" id="an2">And I'm another one!</div>

And here is the problematic Javascript code:

function myAnnotation(argument) {

var x = document.getElementById("an" + argument);

  document.getElementById(y).style.display = "none";

  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }

  y = "an" + argument;
}

Answer №1

Your code has a few errors that need attention:

  1. id's must be unique; you have defined an1 twice.
  2. The function myAnnotation is not receiving any arguments, even though it expects one.
  3. When clicking on the <a> link, it will attempt to post and may not function as expected.

Take a look at my example to help guide you in the right direction. You can make modifications to enhance its dynamism while staying on track.

.annotation, .annotation a {
  display: none;
}
<div class="text">
  Here is some text.
  In this text there are links
  <a href="#" class="link" onclick="myAnnotation('an1')">here</a>
  and there are links
  <a href="#" class="link" onclick="myAnnotation('an2')">there</a>.
  And there are probably many more!
  They each open their own annotation on the side.</div>

<div class="annotation" id="an1">I'm the first annotation!</div>
<div class="annotation" id="an2">And I'm another one!</div>

<script>
function myAnnotation(id) {
   var element = document.getElementById(id);
   if(element.style.display == 'block')
      element.style.display = 'none';
   else
      element.style.display = 'block';
}
</script>

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

Description for script tag in HTML body

How can I embed a GitHub gist on my website using the script tag? I currently use the following code: <script src="https://gist.github.com/uname/id.js"></script> I've been wondering if there is a way to add alt text in case the gist fail ...

Is there a way to compare the elements of an array with those of another array containing nested arrays in order to identify matching results?

Every user in our database has specific skills assigned to them. We maintain a list of available skills with unique IDs. The objective is to filter users based on the skill we are interested in, like displaying all Janitors. We are utilizing Vue.js and im ...

What could be causing Node to encounter difficulties in locating the SubmitEvent?

I'm currently integrating unit tests with jest into my React app. The code snippet I have in my test is giving me trouble, as it throws a "ReferenceError: SubmitEvent is not defined" when executed. taskInputForm.dispatchEvent(new SubmitEvent("submit" ...

Elevate state in React to modify classNames of child elements

I have a structured set of data divided into 6 columns representing each level of the hierarchy. When a user makes selections, their chosen location is highlighted with a dynamic CSS class name and displays the relevant data list. I've managed to impl ...

Unable to create a responsive layout because of the use of inline CSS with "margin"

Currently, I am working on a design for a webpage that must be responsive to large, medium, and small screens. To achieve this responsiveness, I am using Material UI Grid container and placing Chips inside it with the style={{ marginLeft: 60 }} from the se ...

Executing Multiple AJAX Functions with when()

My goal is to use jQuery's when() method to run multiple Ajax functions upon form submission. The plan is to wait for these functions to finish and then finally submit the form. However, it seems like my code is not working as intended: $('form[ ...

When an input is double-clicked, the message"[object object]" appears on the screen

Here is the structure of the template used for the directive. Our code fetches data from a service which contains all the details of a specific individual. We display only the first name, last name, and either designation or company affiliation from that d ...

Using JavaScript, HTML, and CSS to select slices of a donut pie chart created with SVG

I have successfully implemented CSS hover effects and can manipulate the HTML to use the .active class. However, I am facing difficulties in making my pie slices switch to the active state upon click. Moreover, once this is resolved, I aim to enable select ...

Creating visually appealing Jquery-ui tab designs

Trying to customize the jquery tabs, I experimented with styling them to my liking. One thing I did was attempt to reduce the size of the tabs by adding a height:45px; to the UI stylesheet shown below. .ui-tabs-vertical .ui-tabs-nav li { clear: left; ...

Guide on incorporating step-by-step process with React Navigation icon

Looking to develop a unique navigation style in Reactjs but hitting a roadblock. If anyone has any ideas or suggestions on how to implement this, I would greatly appreciate it. https://i.sstatic.net/esJ7x.jpg ...

Reactjs - There was an error: $node.attr(...).tooltip is not defined

I am currently troubleshooting the SummerNote mention library and encountering an issue - Uncaught TypeError: $node.attr(...).tooltip is not a function The versions I am using are: - "react-summernote": "^2.0.0", - React version: "react": "^16.8.6", ...

Why is "undefined" being used to alert an ajax call response?

I am encountering an issue with a returned value from an AJAX request. The web method being referenced returns a boolean value of true or false. However, when attempting to access this value outside the AJAX method, I am receiving an "undefined" message :? ...

How to Align Horizontal Scrollable Cards in Bootstrap 4

Having trouble centering a Single Row of Horizontal Scrolling Cards. I've tried: a) the mx-auto class b) using text-align: center Nothing seems to be working and there's a lot of space on the right side in desktop view. Interestingly, the scro ...

What is the process for transferring an environment.json file to the output directory and then utilizing it with Webpack 4?

Our application is expanding with multiple environments and vendors on the horizon. While the traditional approach of running webpack --env.NODE_ENV=myenvironment works for now, it will soon become inefficient. The main objective here is to streamline the ...

Exploring the world of JSON manipulation in JavaScript

I've been experimenting with JSON recently and came across something I don't quite understand. Here is an example of some code I used: var str = "{'name':'vvv'}"; var cjson = eval ("(" + str + ")"); alert( ...

Can you explain the variance between a JavaScript Array and Object besides their .length property?

I have a theory that a JavaScript array functions as a hashmap, only accepting integral values as keys. Also, the .length property simply returns the largest index + 1. Is my understanding correct? Are there any other distinctions to note? ...

The data type 'string' cannot be assigned to the type 'Message' in NEXT.JS when using TypeScript

Currently, I am undertaking the task of replicating Messenger using Next.Js for practice. Throughout this process, I have integrated type definitions and incorporated "Upstash, Serverless access to the Redis database" as part of my project. I meticulously ...

Guide to creating a clickable inline svg in HTML/CSS for use with onclick event in JavaScript

I have a unique inline svg code snippet in my html: <svg id="nav-search-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32.2 32.2"><path d="M19 0C11.8 0 6 5.8 6 13 ...

The video rendered with fluent-ffmpeg appears to have an elongated image

I am working on combining an mp3 audio file with a jpg image file to create a new mp4 video. Although I have a functional fluent-ffmpeg command that accomplishes this task, there is an issue where the image gets stretched in the final output video, especia ...

How can an SVG circular progress bar be created using stroke dasharray?

Can anyone help me with adding dashes between the line in this progress bar I'm trying to recreate? Any suggestions would be greatly appreciated. https://i.sstatic.net/KdwtzYGy.png This is my progress so far: https://i.sstatic.net/3KTjic5l.png I h ...