Hide link only when css button is pressed

Question

I am new to coding (just started a week ago with html and css). On the news page, I tried to implement “read” links similar to this question here: on the button hide this (button link) pure css

However, I cannot make the link disappear after clicking on 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>

Run codeHide result

It seems to me that I ruined something, but I really can not understand.

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>

Run codeHide result

Answer 2

, , ... id, 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>

Hide result