• Home
  • Content Accordion

    Click Here to Open and Close this Accordion

    This accordion defaults to closed...

    Click Here to Close and Open this Accordion

    To make an accordion default to open, add open after details, like this...

    <details open>

    ANY CONTENT THAT YOU WANT TO HIDE INSIDE AN ACCORDION, put it in between these 2 blocks of HTML:

    HTML block 1:

    <details>
      <summary>Click Here to Close and Open this Accordion</summary>
    
        <p>This accordion defaults to closed</P>

    [Add your content and blocks as usual, sandwiched right here, in between]

    HTML block 2:

    </details>
    
    <style> /* some optional pretty styling */
                
    details {
        width: 100%;
        background-color: #eee;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 5px #35353536;
    }
                
    summary {
        background: rgb(59,89,152,.5);
        color: #fff;
        padding: 0 0 0 15px;
        margin: -5px;
        cursor: pointer;
        border: .5px solid gray;
        border-radius: 5px;
        outline: none;
    }
    
    summary:focus, summary:hover {
    background-color: rgb(0,172,237,.5);
    }
                
    </style>

    Page Contents