Sometimes we do not want to show the whole information at glance on a web page. We just want a summary of it and the details can be checked by the user if interested. Here is when the <details> element comes into handy. It works together with the <summary> element that contains the summarized information the user looks at first. Then below it, we put the full information of the summary. Check out the snippet below
See the Pen Details & Summary by bmutebi (@bmutebi) on CodePen.
From the output, you can see the beautiful summary of the different sections. On clicking on each of them, full information about the section is revealed. You can go ahead and play with these wonderful HTML elements the way you want.
