<a> link in a div hide/show with CSS not working

Question

<a> link in a div hide/show with CSS not working

4.7k Views Asked by Emanuele Tinari At 03 April 2025 at 06:50

In this site I found and modified a CSS/HTML example. All seems go well but <a> link inside the div not working: its show without problems but when I click on them the only thing that happen is to hide the div and no more.

Here is the code:

.clicker {
  outline: none;
  text-align: center;
  font-size: 1em;
  font-style: italic;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  margin-top: -2em;
  margin-bottom: 3em;
}
.hiddendiv {
  display: none;
}
.clicker:focus + .hiddendiv {
  display: block;
}
body#l-autore div.main div.hiddendiv ul.opere {
  font-size: 0.75em;
  list-style-type: none;
  font-style: italic;
  text-align: center;
}
body#l-autore div.main div.hiddendiv ul.opere li {
  display: inline;
}

<body id="l-autore" xml:lang="it-IT">
  <div class="header">
    <h1>Brevi profili biografici degli autori</h1>
  </div>
  <div class="main">
    <h1 id="sigil_toc_id_1">EXAMPLE</h1>
    <div class="clicker" tabindex="1">
      <h2 id="sigil_toc_id_2">
<p class="autori" id="id_romano">Romano</p>
</h2>
    </div>
    <div class="hiddendiv">
      <ul class="opere">
        <li>
          <a href="Cap02sez1.html">
            <span class="nr">I</span>
          </a>
        </li>
        <li>
          <a href="Cap02sez2.html">
            <span class="nr">II</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</body>

Of course the two files Cap02sez1.html and Cap02sez1.html exist: before to put the link inside the DIV a normal link open the right file.

Original Q&A

There are 2 best solutions below

ByungjuneDaniel YOON On 04 January 2017 at 08:22

Because of the CSS style, the href link is disconnected before execution.

When you click the "I" or "II", code is loose every code in '.hiddendiv'.

So if you want to show and display the ".hiddendiv" with click event,

I suggest that use the javascript with onclick event

[What I do]

Remove the css ".clicker:focus + .hiddendiv {display: block;}"
Add the javascript to hide and show in click event.
Change the 'a' to 'div' for using "onclick"
When click the "I" or "II", execute the movePage function before hide the '.hiddendiv'

function viewList(){
  document.getElementsByClassName('hiddendiv')[0].style.display = 'block'
}

function movePage(path) {
  window.location.href = path;
  document.getElementsByClassName('hiddendiv')[0].style.display = ''
}

.clicker {
  outline: none;
  text-align: center;
  font-size: 1em;
  font-style: italic;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  margin-top: -2em;
  margin-bottom: 3em;
}
.hiddendiv {
  display: none;
}
.clicker:focus + .hiddendiv {
/*  display: block;*/
}
body#l-autore div.main div.hiddendiv ul.opere {
  font-size: 0.75em;
  list-style-type: none;
  font-style: italic;
  text-align: center;
}
body#l-autore div.main div.hiddendiv ul.opere li {
  display: inline;
}

<body id="l-autore" xml:lang="it-IT">
  <div class="header">
    <h1>Brevi profili biografici degli autori</h1>
  </div>
  <div class="main">
    <h1 id="sigil_toc_id_1">EXAMPLE</h1>
    <div class="clicker" tabindex="1">
      <h2 id="sigil_toc_id_2">
<p class="autori" id="id_romano" onclick=viewList()>Romano</p>
</h2>
    </div>
    <div class="hiddendiv">
      <ul class="opere">
        <li>
          <div onclick=movePage('Cap02sez1.html')>
            <span class="nr">I</span>
          </div>
        </li>
        <li>
          <div onclick=movePage('Cap02sez2.html')>
            <span class="nr">II</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

**Obsidian Age** · Accepted Answer

When you load the page, you're setting display: none on the div containing the links. Upon clicking on Romano, you're making them temporarily visible with .clicker:focus + .hiddendiv. However, that only applies when .clicker is in 'focus'. As soon as you click on one of the links, .clicker loses focus.

Unfortunately, I don't think this is possible to solve with raw CSS, as there is neither a previous selector nor parent selector in CSS. Therefor it is likely impossible to target the display of .hiddendiv from the child a link with raw CSS.

I would look into using JavaScript (preferably jQuery) to solve this with only a few small changes:

HTML:

<p class="autori" onclick="show()"/>

CSS:

.visible { display: block; }

(Also remove the .clicker:focus + .hiddendiv selector)

JavaScript / jQuery:

function show() { $(".hiddendiv").toggleClass("visible"); }

Whenever you click on 'Romano', .hiddendiv will toggle between visible and invisible. I believe this is what you're after. If you just want to show it, and never hide it, you can use $(".hiddendiv").addClass("visible"); instead.

Hopefully you're able to use JavaScript; otherwise I don't think this can be solved sorry!

Updated Answer Without JavaScript

It's actually possible to solve your problem with raw CSS! You can simulate a button click in raw CSS, with some changes to the structure of your HTML. The only way to do this is by utilising a hacky version of checkbox. First, we put your .clicker inside the label for a checkbox:

<input type="checkbox" id="show" />
<label for="show">
   <div class="clicker" tabindex="1">
      <h2 id="sigil_toc_id_2">
         <p class="autori" id="id_romano">Romano</p>
      </h2>
   </div>
</label>

Notice that the clicker div is now a label for the new input #show. Now we modify the CSS to reflect this, with a new target, while hiding the real checkbox:

#show {
    display: none;
}

We can then toggle the visibilty based on the :checked status of the invisible checkbox:

#show:checked ~ .hiddendiv {
    display: block;
}

#show:not(:checked) ~ .hiddendiv {
    display: none;
}

Naturally, you'll also need to remove both of the following:

.hiddendiv {
     display: none;
}

.clicker:focus + .hiddendiv {
     display: block;
}

Working sample here (with tidied code).

And thus, you have a visibility toggle for a separate div, with raw HTML and CSS :)

Updated Answer With No JavaScript And Multiple Hidden Content Divs

It's quite possible to get this to work the same way with multiple different sections that are hidden. To do this, you simply create a range of hidden checkboxes that each start with the same name. Instead of using just #show, you would use #show_1, #show2, #show_3, etc. You can then target them with the CSS regular expression [id^=show].

HTML:

<input type="checkbox" id="show_1" />
    <label for="show_1"></label>
</input>

<input type="checkbox" id="show_2" />
    <label for="show_2"></label>
</input>

CSS:

[id^=show] {
  display: none;
}

[id^=show]:checked ~ .hiddendiv {
  display: block;
}

[id^=show]:not(:checked) ~ .hiddendiv {
  display: none;
}

Here's a new fiddle showing it working with multiple toggles controlling individual hidden divs :)

<a> link in a div hide/show with CSS not working

There are 2 best solutions below

Updated Answer Without JavaScript

Updated Answer With No JavaScript And Multiple Hidden Content Divs

Related Questions in HTML

Related Questions in CSS

Related Questions in SHOW

Related Questions in HIDDEN

Trending Questions

Popular # Hahtags

Popular Questions