This page contains several use-cases for the Details-Summary tags combined. Note that <summary> must be the first child of the enclosing <details> element.

1. Structure

Summary is always visible Details may be hidden
Click on the summary to hide

HTML code 





2. Hidden answer



    I have keys but no doors. 

        I have space but no room. 

        You can enter but can’t leave. 

        What am I?
     Keyboard






    HTML code
    





3. Multiple levels



    What are the first two 
      programming languages in 1950's?
    

        Scientific/Engineering
        Fortran
    

    

        Business/Finance
        Cobol
    







    HTML code
    





4. Menu selection  
  
    
    Absolute position
  



What is your favorite flavor of ice cream?




Menu styles are from 
Jen Kramer


The menu on the left is plain <UL>.

The other menu is 
details-menu element



    HTML code
    





5. Dialog interface

Summary is an icon with no text or marker.

ESC key cancels the menu and the dialog.



    😊
    

      

        😊 
        
      

    





    🙂
    

      
        🙂 
        
      
    




The dialog on the left is plain <DIV>.

The other dialog is 
details-dialog element



    HTML code
    





6. Simplification

Compare this with the complexity here:
How TO - Tree View
that represents the state of the art before <details> tag.


    Beverages
    
  • Water
    • 
    
  • Coffee
    • 
    
    
        Tea
        
  • Black Tea
    • 
        
  • White Tea
    • 
        
    
            Green Tea
            
  • Sencha
    • 
            
  • Gyokuro
    • 
            
  • Matcha
    • 
            
  • Pi Lo Chun
    • 
        
    
    
    

    

    

    
    HTML code
    
    

    


    7. Tree display
    
Previous example hints the possibility of recursive trees.
Thus, we have a mechanism to display trees within HTML.

    
    Several live examples
    DOM tree
    
    Family tree
    
    Expression tree
    

    

    

    

    I have learned about Details tag from 
#30DaysofHTML. 


    
Details on <details>
explains its use at GitHub. 


    
These examples (except #4 and #5) require no JavaScript. 
All functionality is provided by HTML and CSS.
About 30 lines of JS were needed for the menus.