5

I'm trying to build a page where only headlines are visible when it is loaded, and the tables beneath each title toggle between hidden and displayed state when the user clicks on the title. The constraint I have is to do this in CSS only.

This is what I came up with so far:

https://jsfiddle.net/Argoron/c1ypx24c/6/

It doesn't work the way it should because every time I click on a title, the tables beneath the other titles are hidden. What I'm trying to accomplish is that each section behaves independently, meaning that for example table 1 should change its display state only when title 1 is being clicked.

Also, not sure why both alternative titles are displayed in section 3.

DaniP
  • 37,813
  • 8
  • 65
  • 74
Argoron
  • 749
  • 2
  • 10
  • 26

2 Answers2

7

I will suggest use checkbox input and :checked instead of a and :target tags to trigger the event since the target will change always you click another link. Try this:

.tb {
    margin:10px 0;
}
.tb span+span, .collapsible {
    display:none;
}
.tb input[type="checkbox"]:checked ~ span {
    display:none;
}
.tb input[type="checkbox"]:checked ~ span+span{
    display:inline;
}
.tb input[type="checkbox"]:checked ~ .collapsible {
    display:table;
}
<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 1</td>
        </tr>   
    </table>    
</div>
<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 2</td>
        </tr>   
    </table>    
</div>
<div class="tb">
    <input type="checkbox"/>
    <span>Show</span><span>Hide</span>
    <table class="collapsible" id="collapsible1">
        <tr>
            <td>Hello 3</td>
        </tr>   
    </table>    
</div>

Now if you don't want to see the checkbox you can use CSS. Check this Snippet

.tb {
  margin: 10px 0;
  position: relative;
}
input[type="checkbox"] {
  width: 100%;
  height: 23px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}
input[type="checkbox"]:hover ~ span {
  background: black;
}
.tb span {
  position: relative;
  height: 23px;
  line-height: 23px;
  display: inline-block;
  background: red;
  color: white;
  transition: all .3s ease;
  padding: 0 10px;
  width: 100%;
}
.tb span+span,
.collapsible {
  display: none;
}
.tb input[type="checkbox"]:checked ~ span {
  display: none;
}
.tb input[type="checkbox"]:checked ~ span+span {
  display: inline-block;
}
.tb input[type="checkbox"]:checked ~ .collapsible {
  display: table;
}
<div class="tb">
  <input type="checkbox" />
  <span>Show</span><span>Hide</span>
  <table class="collapsible" id="collapsible1">
    <tr>
      <td>Hello 1</td>
    </tr>
  </table>
</div>
<div class="tb">
  <input type="checkbox" />
  <span>Show</span><span>Hide</span>
  <table class="collapsible" id="collapsible1">
    <tr>
      <td>Hello 2</td>
    </tr>
  </table>
</div>
<div class="tb">
  <input type="checkbox" />
  <span>Show</span><span>Hide</span>
  <table class="collapsible" id="collapsible1">
    <tr>
      <td>Hello 3</td>
    </tr>
  </table>
</div>

Or the DemoFiddle

DaniP
  • 37,813
  • 8
  • 65
  • 74
  • It does indeed work the way I'm expecting it to, unfortunately using checkboxes in the actual page where I'm facing this issue is not an option. The jsfiddle is just a much simplified representation of the problem. – Argoron Feb 18 '15 at 14:00
  • So you can't add any extra elements ? @Argoron that way the code you post and `:target` will be impossible – DaniP Feb 18 '15 at 14:06
  • I can add extra elements, with the condition however that they do not differ too much visually from the current "title" element as the page I'm working on is a mockup with a predefined "look and feel" chart. The actual title element looks like a "flat" button, a bit like the Stackoverflow buttons without the shading and the rounded corners. – Argoron Feb 18 '15 at 14:12
  • So ? What's the problem style it with CSS ... check my second snippet or Fiddle @Argoron – DaniP Feb 18 '15 at 14:16
  • Your solution is great, however I'm having trouble implementing it so that it works. The problem I guess stems from the fact that I have to place the checkbox input into a table, so I think the css rule to display in table form no longer finds its target. Would you have a solution for that ? Seria bacano – Argoron Feb 18 '15 at 15:16
  • If the checkbox is on `td` and the other itemas aren't on the same level you can't with CSS since there is no parent selector – DaniP Feb 18 '15 at 15:35
  • It works fine, DaniP, thanks you. What would be the proper way to insert not collapsible rows, please? Consider that many tables would only pretend to collapse some rows and not some others. I could open a new question if needed to solve it. – Sopalajo de Arrierez Jul 02 '18 at 15:55
  • 1
    All you need is Love!!! You provided the basis for a beautiful totally CSS animated drop-down menu. Thanks! – Samuel Ramzan Apr 15 '21 at 05:54
1

Your error was in #FirstC:target + #First . Also you misspelled the selector #ThirdE

https://jsfiddle.net/c1ypx24c/10/

table.collapsible {
    display: none;
}

#FirstE, #SecondE, #ThirdE {
    display: none;
}

#FirstC:target ~ #FirstE,
#SecondC:target ~ #SecondE,
#ThirdC:target ~ #ThirdE{
    display: inline;
}

#FirstC:target, 
#SecondC:target,
#ThirdC:target{
    display: none;
}

#FirstC:target ~ #collapsible1, 
#SecondC:target ~ #collapsible2,
#ThirdC:target ~ #collapsible3{
    display: inline;
}
Weinz
  • 396
  • 1
  • 5
  • 23
  • Unfortunately this still does not what I'm trying to accomplish, which is that the clicks only affect the table from the same section. For example, when I click title 1, table 1 expands, but when I click on title 2 next, table 1 is hidden again, though it should remain visible. – Argoron Feb 18 '15 at 13:56