Hyperlinks inside accordion are translucid (HTML CSS ONLY)

Question

I am working on this code which I am adapting from https://codepen.io/dandiws/pen/qqyeed

But when I try to include a hyperlink inside the accordion it is seen even when the accordion its closed.

How can i make the links not to be visible when the accordion is closed?

Do you know how to fix?

<html>
  <head>
      <style>
          body {
 background-color:#d3d0c9;
  font-family:'Arial';
  padding:2em 6em;
}
h1{
  color:#fff;
  text-align:center;
}
/*--------Accordion-------*/
.acc-kontainer {
  width: 100%;
  margin: auto;
}
.acc-kontainer .acc-body {
  width: 98%;
  width: calc(100% - 20px);
  margin: 0 auto;
  height: 0;
  color: rgba(0, 0, 0, 0);;
  background-color: rgba(42, 41, 92, 0.9);
  line-height: 28px;
  padding: 0 20px;
  box-sizing: border-box;
  transition: 0.5s;
}

.acc-kontainer label {
  cursor: pointer;
  background-color: rgba(101, 103, 106, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
  padding: 15px;
  width: 100%;
  color: #fff;
  font-weight: 400;
  box-sizing: border-box;
  z-index: 100;
}

.acc-kontainer input{
  display: none;
}

.acc-kontainer label:before {
  font-family: 'FontAwesome';
  content: '\f067';
  font-weight: bolder;
  float: right;
}

.acc-kontainer input:checked+label {
  background-color: rgba(255, 255, 255, 0.15);
}

.acc-kontainer input:checked+label:before {
  font-family: 'FontAwesome';
  content: '\f00d';
  transition: 0.5s;
}

.acc-kontainer input:checked~.acc-body {
  height: auto;
  color: #fff;
  font-size: 16px;
  padding: 20px;
  transition: 0.5s;
}
      </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  </head>
<body>
  <h1><img src="file:///Macintosh HD/Users/Matias/Desktop/banner.jpg" width="950" height="260" alt=""/></h1>
  <p>&nbsp;</p>
<div class="acc-kontainer">          
   <div>
       <input type="radio" name="acc" id="acc1" checked>
       <label for="acc1">REGISTER to your SESSIONS</label>
       <div class="acc-body">
          Link for registering to session <a href="www.google.com">Register</a> <br>
           
       </div>
      </div>
     <div>
        <input type="radio" name="acc" id="acc2">
        <label for="acc2">COMPLETE your PRE-WORK</label>
        <div class="acc-body">
          Pre work links <a href="www.google.com">link</a>
            
        </div>
      </div>
     <div>
        <input type="radio" name="acc" id="acc3">
        <label for="acc3"> TECH CHECK & TROUBLESHOOTING</label>
        <div class="acc-body">
          Please follow this link to download Mursion software
            Download this file which guides you how to install ...
            
        </div>
       </div>
    <div>
        <input type="radio" name="acc" id="acc4">
        <label for="acc4">CONTINOUS LEARNING TOOLKIT</label>
        <div class="acc-body">
            
          Links 
            bada di
            badad da
            
        </div>
      </div>
  </div>
</body>
</html>

Answer 1

Try adding this for links

.acc-kontainer input:checked~.acc-body a {
    color: blue; /* whatever link color you want */
}


.acc-kontainer input:not(:checked)~.acc-body a {
    color: rgba(0, 0, 0, 0); /* font color set to transparent like other content in .acc-body */
}

Hyperlinks inside accordion are translucid (HTML CSS ONLY)

Question

1 answers

solution1
0 ACCPTED 2021-04-27 20:16:29

Hyperlinks inside accordion are translucid (HTML CSS ONLY)

Question

1 answers

solution1 0 ACCPTED 2021-04-27 20:16:29

solution1
0 ACCPTED 2021-04-27 20:16:29