This <p>aragraph is just something to read while the browser hides and bolds other form elements, below.
All that hiding and bolding happens faster than the eye can detect, unless you save this page to disk and open the saved copy with Internet Explorer.
(That's because IE blocks JavaScript for local files until you click .)
The and buttons affect the two page elements immediately following them:
This <span> started out normal because the <button> to its left was .
Also, this <div> started out visible because the <button> above was .
Clicking the <button> changes it to and hides this <div>.
This <span> started out bolded because the <button> to its left was .
This <div> started out hidden but was exposed when you clicked the <button>.
The <button> has now changed to and clicking it again will change it back and rehide this <div>.
Alternate Javascript-free approach:
This is a summary element embedded within an outer details element.
This is the actual content of the details element.
It is located between the closing </summary> and </details> tags.
It started out exposed because its details element included the open attribute.
This is another summary element inside a details element nested inside another details element.
This content started out hidden because its details element did not include the open attribute.
Credit goes to Armhf Dev ...
Thanks for sharing this awesome tech with me. !~}>
The and buttons, however, affect the page elements immediately preceding them:
Right now you want to see more, but later you'll change your mind and want to see .
Like , the button exposes the page element immediately preceding it.
Unlike , however, hides itself. Once you click it, there's no going back:
The danger is that once you've seen something, you cannot unsee it.