CODEWITHSUNDEEP
htmlcss
Dmitry
Dmitry

Reputation: 61

Clicking the linkcloses the element containing the tabindex="0"

When you click on the link inside the spoiler, the spoiler closes.How can this be fixed?

This is the link inside the spoiler: <a href="#">test</a>

https://jsfiddle.net/0gtfxv6h/

    .awm_spoilerbox:focus .awm_spoiler {display: block;}
    .awm_spoilerbox:focus .awm_close {display: block;opacity: .75;}
    .awm_spoilerbox:focus .awm_open {display: none;}
    .awm_close {display: none;}
    .awm_open {display: block;}
    .awm_spoilerbox:focus .active {display: block;}

    .awm_spoiler {
      position: absolute;
      display: none;
      width: 100%;
      height: auto;
      left: 0;
      top: 30px;
    }
    <div class="awm_spoilerbox" role="tab" tabindex="0">
      <a class="awm_open">Open</a>
      <a tabindex="1" class="awm_close">Close</a>
      <div class="awm_spoiler">
        test <a href="#">test</a>
      </div>
    </div>

Upvotes: 0

Views: 54

Answers (2)

Dmitry
Dmitry

Reputation: 61

It is strange that I had not thought about it before. The solution was very simple:

.awm_spoiler:hover{display: block;}

Upvotes: 2

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

You need a <input type="checkbox"> to remember if the spoiler is open or closed:

.spoiler-box input {
  display: none;
}
.spoiler-box label {
  display: block;
  width: 200px;
  margin: 0 auto;
  padding: 5px 20px;
  background: #e1a;
  color: #fff;
  text-align: center;
  font-size: 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .6s;
}
.spoiler-box .spoiler {
  width: 90%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 10px auto 0; 
  padding: 10px; 
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: all .6s;
}
.spoiler-box input:checked ~ .spoiler{
  height: auto;
  opacity: 1;
  padding: 10px;
}
.spoiler-box input:checked ~ .open,
.spoiler-box input ~ .close {
  display: none;
}
.spoiler-box input:checked ~ .close {
  display: block;
}
<div class="spoiler-box">
  <input type="checkbox" id="spoiler"/> 
  <label for="spoiler" class="open">Open</label>
  <label for="spoiler" class="close">Close</label>
  <div class="spoiler"><a href="#">test</a></div>
</div>

Upvotes: 1

Related Questions