Ways to connect to a minimized hidden tabindex component using the hashtag symbol

I have created a glossary with terms in columns and hidden texts using plain css/html. Each entry is structured like this: A term followed by a hidden explanation, revealed on focus without the use of Java or JS.

Instead of using :hover, I utilize :focus to maintain an open popup window for the explanation. However, I am struggling to create internal links within the glossary entries to refer back to the main entry seamlessly.

I have tried adding tabindex=0 and applying .w:focus .tt{display: inline-block ; cursor:pointer; } in the css, but still can't link one entry from the opened window to another. Any guidance on how to achieve this would be greatly appreciated.

For example, when clicking on 'link to entry alpha' from an opened window of '2nd Entry on beta', I want it to navigate to '1st Entry Alpha'. It seems that the provided javascript code did not resolve this issue as expected, although the glossary functions well otherwise.

htmlcsshyperlinkfocustabindex

Answer №1

Check out this JavaScript solution: grab the hash, locate the element with the corresponding name, and give it focus. Make sure to wrap everything in an onload function to ensure the browser focuses on the element.

window.onload = function () {
  var hash = window.location.hash.substr(1);
  if (hash) {
      var target = document.getElementsByName(hash)[0].focus()
  }
}
.w {
  display: block;
  color: black;
  text-decoration: none;
}
.w > div {
  display: none;
}
.w:focus {
  outline: none;
}
.w:focus > div {
  display: block;
}
<a name="q1" href="#q1" class="w">
  Question ?
  <div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
<a name="q2" href="#q2" class="w">
  Question ?
  <div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
<a name="q3" href="#q3" class="w">
  Question ?
  <div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</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

Excessive text in HTML div element

Whenever I maximize the window in any browser, I type a long string in a div or span tag. It perfectly fits within the div tag. However, when I minimize or compress the browser width, the text spills out of the div area. I am looking for a solution to set ...

csshtml

Struggling to implement a sidebar in HTML using jQuery and running into issues?

I am struggling to create a template that includes a navbar, sidebar, and other elements that can be used across multiple HTML files. Despite trying different approaches, including changing the jQuery version and downloading jQuery, I am unable to make it ...

javascripthtmljquerycss

Adjust the hue of the SVG sprite

I am currently using an SVG sprite as the background image for my project: .naar-logo { background: url(images/salt_sprite.svg) no-repeat -8px -78px; width: 36px; height: 49px; position: relative; top: 38px; } <div class="naar-logo ...

htmlcsssvg

I am looking to conceal an element as soon as a list item is scrolled into view and becomes active

Is it possible to hide a specific element when the contact section is activated on scroll, and have it visible otherwise? How can this be achieved using Jquery? <ul class="nav navbar-nav navbar-right navmenu"> <li data-menuanchor="ho ...

jqueryhtmlcsstwitter-bootstrapshow-hide

How come Angular8's routerLinkActive is applying the active class to both the Home link and other links in the navigation bar simultaneously?

Currently, I am facing an issue with routing in my project where the home tab remains active even when I click on other tabs. I have tried adding routerLinkActiveOption as a solution, but it doesn't seem to be working for me. <ul class="nav nav-ta ...

htmlangulartypescriptangular-ui-bootstrap

Make the div stretch to the bottom of the webpage

This question may be a common one, but despite my efforts, I have not been able to find a solution to what seems like a simple issue. Here is the code snippet in question: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

htmlheightextend

There seems to be an issue with configuring placeholders in Tailwind CSS

After deciding to switch to using only tailwind CSS, I noticed that on a particular page there were inputs with transitions but no icon on the inner left side. Adjusting the colors and position of the placeholder helped prevent collisions between the icon ...

htmltailwind-css

The focus of the input is lost when the value is being edited, specifically in the case where ngFor and ng

I'm facing an issue with a simple list that binds two-way to a parameter hero in my hero.component.ts. Whenever I begin typing in the input field, it seems to lose focus and I have to click on it again. How can I ensure that users are able to edit th ...

javascripthtmlangularangular5

Ways to split up array objects in an axios GET request

Hello, I recently implemented an AXIOS GET request that returns an array of objects. However, the current example I am using retrieves the entire array at once, and I need to separate the objects so that I can work with them individually. class CryptoAP ...

javascripthtmlreactjsapiaxios

Having trouble with the full-screen feature not functioning properly?

I am currently in the process of creating a custom video player and I need to include a full-screen button. However, when I click on it, the video does not expand to fill up the entire screen. I am using javascript, css3, and html5 for this project. Any as ...

javascripthtmlcss

Ways to align two divs side by side using CSS and HTML

Here is a question that needs solving: I have two elements that need to be displayed in one row at a specific ratio, with the same pattern repeating in subsequent rows. However, the content of the next row is appearing in the unused space of the previous r ...

htmlcss

The bookdown feature of tufte_html_book, when combined with the csl style, struggles to properly position citations

bookdown::tufte_html_book does not place citations in the margin with csl notes. Here is an example: bookdown::render_book(input = "index.rmd", output_format = "bookdown::tufte_html_book") The csl used comes from: https://raw.githu ...

htmlbookdowncsltufte

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...

cssflexbox

Could someone provide a detailed explanation on the functionality of multiple inline nth-child() in CSS?

In this scenario, there is an example provided: html>body>#wrapper>div>div>div:nth-child(1)>div:nth-child(1)>nav { I am curious about the functionality of this code. Could someone dissect each div, ">", and nth-child()? Your ins ...

htmlcss

The output of VueJs hooks shows a blank refs object first, followed by the referenced elements

Below is the HTML VueJS code sample that I am working with: <div v-for="site in topSites" ref="ts"><a :href="site.url"> ... </div> Update: Here is the full div code: <div v-for="site in topSites& ...

javascripthtmlvue.jsvuejs2vue-component

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

javascripthtmldomaddeventlistener

Confirmation of numerous checkbox selections

I am facing a challenge with a form that contains multiple questions answered through checkboxes. I need to validate that at least one checkbox is selected in all the questions, otherwise an alert message should pop up. Is it possible to achieve this val ...

javascriptjqueryhtml

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

What is the best way to locate relative blocks and convert them to absolute position while keeping them in the same place? Is this something that can be achieved using JavaScript or jQuery, or is it simply not possible? Thank you very much. ...

javascriptjqueryhtmlcssposition

Some mobile web browsers are experiencing difficulties when trying to load a background video coded in html5

There is a full background HTML5 video set to autoplay on my website. However, there seems to be an issue with some iOS mobile devices using Safari as the video fails to load properly at times. The error message displayed is: https://i.stack.imgur.com/D4X ...

htmlreactjsvideobackgroundhtml5-video

What attribute should I utilize to ensure the image always takes priority over text when using @media queries?

resolution My goal is to have the image appear on top of the text when resizing the window, but maintain the appearance shown in the attached image when using a larger resolution. Below is the CSS code I am currently using: .section4 { text-align: cen ...

htmlcss