Hiding a link on click css only

Question

i'm pretty new to coding (just started a free weeks ago with html and css). For a news page i tried to implement "read on" links, similiar to this question here: on click hide this (button link) pure css

However i can't seem to make the link disappear after clicking it. I got this for my code so far (opening and closing works just fine):

.readmore {
  display: none;
}

article[id*="n"]:target .readmore {
  display: block;
}

article:target .used {
  display: none;
}

<article>Text visible after you open the site.


  <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>

  <article id="n2">
    <div class="readmore">more text
     <a href="#back">Closing button</a>
    </div>
  </article>
</article>

I feel like i messed something up big time, but i really can't figure it out.

Answer 1

Just put your link inside the article tag including your id.

.readmore {
  display: none;
}

article[id*="n"]:target .readmore {
  display: block;
}

article[id*="n"]:target .used {
  display: none;
}

<article>Text visible after you open the site.

  <article id="n2">
    <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>
    <div class="readmore">more text
      <a href="#back">Closing button</a>
    </div>
  </article>
</article>

Answer 2

Using this you can achieve what you want.....you have added id inner article which you have to give parent artical and change css

.readmore {
  display: none;
}

#n2:target .readmore {
  display: block;
}

#n2:target .used {
  display: none;
}

.readmore {
  display: none;
}

#n2:target .readmore {
  display: block;
}

#n2:target .used {
  display: none;
}

<article id="n2">Text visible after you open the site.


  <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>

  <article>
    <div class="readmore">more text
     <a href="#back">Closing button</a>
    </div>
  </article>
</article>