Use my class in my link

Good morning,

How do I use the same class “overlay overlay–info” in my link <a href

I would like to be able to use this class in several links that I have on my page in order to open different information.

the info button which uses this class and where I would like to do the same with my link

<button class="btn btn--info btn--toggle">
  <svg class="icon icon--info">
   <use xlink:href="#icon-info"></use>
  <svg class="icon icon--cross">
   <use xlink:href="#icon-cross"></use>
<div class="overlay overlay--info">
	<p class="info">&ldquo;test; xxxxxxxxxxxxxx</p>

the link where I would like to be able to use the “overlay overlay–info” class

<a href="">
   <div class="slide__number">En Savoir <strong>plus</strong></div>

Can you help me ?

Thank you

It’s not really clear what you’re asking. In class="overlay overlay–info", there are two classes — overlay and overlay-info, and you can use them on ay elements you like.

Are you having a particular problem?


How are you showing the overlay information ?

Are you using JS for this or a css method?

We’d need to see full code (html,css,js)

If you are using js and want to open multiple overlays then you’d need to loop through each trigger element and have a method to identify which overlay to open.

Good morning,

Thank you for your answers.

I am busy following a training course and I have an info button which opens a page and I would like to be able to do the same thing with the link I made on each page on the first page there is the free quote link and the others page the link find out more.

Here is the code:

when I click on the info button I get this result that I would like to achieve on my links which is at the bottom of the page

I would like to use this

<div class="overlay overlay--info">
<p class="info">&ldquo;xxxxxxxxxxxxxxxxxxxx</p>

in my link I don’t see how to do this?

<a href="">
<div class="slide__number">En Savoir <strong>plus</strong></div>

I’ll move the thread to the JS forum as you have some complex code going on there.

1 Like

Im still unclear on why the answer to this is still not just “so add the classes to the div inside the link”?

1 Like

that’s exactly what I want to use this class and I can’t do it.

I see how to do my in this case I don’t usually find I do this #info to use the class.

in the source you can see that it seems more complicated to set up for me and I don’t see how to do that.

Your statement was:

You can see the link. You can see a div inside the link. You can see that it has a class attribute. What is stopping you from typing the words “overlay overlay--info” into that class attribute?

I already tried and it doesn’t work with “overlay overlay–info”

Define ‘doesnt work’.

(Hint: If i’m asking you this, my response is really “It works for me. Are you sure you’ve correctly identified what it is you want?”)

I believe the OP wants to add a class to each of those slide__number parents so that when clicked it will open an overlay specific to that slide number.

e.g. Pseudo code:

	<button class="btn btn--test1 btn--toggle">
	    <span class="slide__number">En Savoir <strong>plus</strong></span>
     <div class="overlay overlay--test1">Test1 overlay will appear</div>

That obviously doesn’t work because the original script is only looking for one element to open so either a new script will be needed or the original refactored for multiple uses.

Unless I’m mistaken as I often am where scripting is concerned :slight_smile:

1 Like

I thought it was easier to set up like a kind of popup.

I just wanted to use the same thing as the info button and do the same for the links.

Many thanks for your help because I am a beginner and I am learning a lot here on the forum even if it is true that I tinker a lot and I try to learn as best I can with your advice.

So how does:

<a href="">
   <div class="slide__number">En Savoir <strong>plus</strong></div>

Translate to a specific slide?

EDIT: Let me phrase that differently. WHICH slide should this particular link send a person to?

I’ll explain it better, sorry, I wrote it wrong

when I click on the “info” button see image below it opens a window with the “info” class which is in the

I get this once I click on the info button and I would like the same thing for my link.

and I would like to do the same with the link below which will use the class info with other text

I have everything on codePen :

oh okay. I get you now. Too much stuff going on on one page… stuff stuffed inside other things obscuring the code from elements… sigh.

Well, there’s a few approaches… personally, i’d think the simplest to implement at this point would be to flood an array with the texts and do a text-replace on the extant box JIT.

Spitballing this for the most part. May need some tweaking.

Inside the function set:

var linkTexts = ['&ldquo;Créateurs de NFT&rdquo; est un artiste qui produit de l’art numérique. Il encrypte ensuite ses créations dans une blockchain. Cette fois-ci,						point de cryptomonnaie comme le Bitcoin, il s’agit d’art numérique. 						Un NFT est le lien entre une œuvre et son certificat unique. Vous avez une idée d’image 					numérique pour votre NFT ? Nos artistes s’occupent de la réaliser.',
'This is a different text',
'This is another text'];

Find and tweak the toggleInfo function:

  function toggleInfo(index) {
    if (isNavigating) {
      return false;
    if (DOM.infoCtrl.classList.contains('btn--active')) {
      // Close it.
    } else
      // Open it.
      DOM.infoText.innerHTML = '<p class="info">' + linkTexts[typeof(index) == 'number' ? index : 0 ] + '</p>'

inside initEvents:

for(let i = 0; i < linkTexts.length; i++) {
  [...document.querySelectorAll(".infoLink"+i)].forEach(link => {
     link.addEventListener('click', function() { toggleInfo(i); }

And then add a class to each link corresponding to their appropriate link text:

<a href="">
   <div class="slide__number infoLink1">En Savoir <strong>plus</strong></div>

PS: With all due deference to ‘learning by example’… I suspect you’re in over your head. You might do better learning from a simpler site.


In case a simpler css version is acceptable you can use the :target pseudo class to open the modal but of course you can’t have any other fragment identifiers inside the modal as that would close it.

Here’s a demo with all the anchors pointing to a modal so that it opens.

If its just for info then it should be ok otherwise you will have to resort to the JS version that @m_hutley has kindly offered.


Many thanks to you for your patience and your help, it’s great for me.

I’m going to test this and try because for me it won’t be easy.

It’s great, it’s really what I wanted.

I will test everything, thank you very much for your help and patience.

@m_hutley it’s very interesting but for me js is basic and in any case it’s very well explained.

I have a problem, I took your code from CodenPen and when I test I see this:
and yet when I copy my code to CodenPen it works I don’t understand?

Do you have an idea ?

it’s in chrome that I have it in mozila it works how can I make it work in chrome?

here is my code:

I indicated in the css where the two css files are located
/* demos.css file /
and at line 520 the file /
normalize.css file */