Blogging Tips #1

In this post, I’m to share my insights on how to add a tag that states ‘Expand To Read’. A few bloggers had asked me for it, and this is a post detailing the need and procedure for the same.

Details tag:

The details tag is more like an interactive disclosure widget. Any content that the user can open and close on demand can be added to this. When open, it expands and displays the content.

When to use the ‘details’ element?

Details tag in HTML can be used to display

• answers for Frequently Asked Questions (FAQs).
• repeated stuff, providing the reader a choice to read.
• spoilers in book or movie reviews.
• answers for puzzles.
• disclosures, or
• any trivial content.

When multiple details tag are added at a sequence as in FAQs, this expansion feature can be set such that the answer to previously opened question closes automatically when another answer is expanded. But, this can be done only by adding script code, which is not possible in the free plan of WordPress.

Summary tag:

The summary tag in HTML expounds a visible heading for the details element. The heading can be clicked to view or hide the details. It can be used only in conjunction with the details tag. By default, ‘Details’ is displayed as the heading that can be expanded. For those who have followed my previous posts, the text ‘Expand to read’ that I use, is put inside this tag.

Inserting Procedure:

1. Choose the location where you want to add this tag.
2. Place the cursor at the desired position and switch to Code/Text Editor (block mode / classic mode).
3. Add the following snippet of HTML code. Note that the opening and closing tags are mandatory.

Sample:

Click to expand / hide

This is a sample content to demonstrate the use of the details tag.

This is how the code for the above sample looks in block editor’s “Code Editor”.