Hide Show content-list with only CSS, no javascript used

Question

I\'ve been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I\'ve managed to make this action:

Answer 1

Just wanted to illustrate, in the context of nested lists, the usefulness of the hidden checkbox approach @jeffmcneill recommends — a context where each shown/hidden element should hold its state independently of focus and the show/hide state of other elements on the page.

Giving values with a common set of beginning characters to the id attributes of all the checkboxes used for the shown/hidden elements on the page lets you use an economical [id^=""] selector scheme for the stylesheet rules that toggle your clickable element’s appearance and the related shown/hidden element’s display state back and forth. Here, my ids are ‘expanded-1,’ ‘expanded-2,’ ‘expanded-3.’

Note that I’ve also used @Diepen’s :after selector idea in order to keep the element free of content in the html.

Note also that the

sequence matters, and the corresponding CSS with + selector instead of ~.

jsfiddle here

.collapse-below {
    display: inline;
}

p.collapse-below::after {
    content: '\000A0\000A0';
}

p.collapse-below ~ label {
    display: inline;
}

p.collapse-below ~ label:hover {
    color: #ccc;
}

input.collapse-below,
ul.collapsible {
    display: none;
}

input[id^="expanded"]:checked + label::after {
    content: '\025BE';
}

input[id^="expanded"]:not(:checked) + label::after {
    content: '\025B8';
}

input[id^="expanded"]:checked + label + ul.collapsible {
    display: block;
}

input[id^="expanded"]:not(:checked) + label + ul.collapsible {
    display: none;
}

  
single item a
  
single item b
  

    
multiple item a
    
    
    

      
sub item a.1
      
sub item a.2
    
  
  
single item c
  

    
multiple item b
    
    
    

      
sub item b.1
      
sub item b.2
    
  
  
single item d
  
single item e
  

    
multiple item c
    
    
    

      
sub item c.1
      
sub item c.2
    
  

0 讨论(0)

查看其它12个回答

发布评论:

提交评论

---

•  加载中...