HTML DETAILS AND SUMMERY



The <details> element is the disclosure widget container. The <summary> is the summary or legend for its parent <details>. The summary is always displayed, acting as a button that toggles the display of the rest of the parent’s contents. Interacting with the <summary> toggles the display of the self-labeled summary siblings by toggling the <details>' element's open attribute.

<! DOCTYPE html> 

<html> 

        <head>

            <title> Details & Summary </title>

        </head>

        <body>

           <details>

        <summary> First </summary>

            <p>FIrst paragraph</p>

            </details>

            <details>

       <summary>Second</summary>

                    <p>Second paragraph</p>

            </details>

            <details>

        <summary>Third</summary>

            <p>Third paragraph</p>

        </details>

        <body>

<html>