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”.

About | Contact | Featured Posts |
Quote Of The Week

20 Comments Add yours

  1. HappySoul says:

    Thanks for this Anisha 😊

    Liked by 1 person

    1. Anisha says:

      I’m happy to share it with you, Happy Soul! ☺❣

      Liked by 1 person

  2. Thank you so much! I have been wondering how to do this without a plugin. This came at the perfect time.

    Liked by 1 person

    1. Anisha says:

      I’m happy to have offered a timely help! Thanks for the feedback.

      Liked by 1 person

  3. Nima Mohan says:

    Thanks Anisha dear 🙂

    Liked by 1 person

    1. Anisha says:

      Glad that this proved useful, Nima! ❣

      Liked by 1 person

  4. Harsh says:

    Okay. Got it. I never knew about the details and summary tags. Thank you for the explanation!

    Liked by 1 person

    1. Anisha says:

      I’d very much appreciate if you’d try this someday when you code. I’m glad to have added a tidbit to your knowledge reserve.

      Liked by 1 person

      1. Harsh says:

        Yes, I’ll definitely try this. Thank you! 🙂

        Liked by 1 person

  5. That was something I was looking for but I would understand only if I try it once. Thanks for sharing

    Liked by 1 person

    1. Anisha says:

      I’d look forward to seeing this feature on your future posts. I’m happy you found this useful!

      Liked by 1 person

      1. Yeah I did. I was asking my husband about it. He said he will teach me how to do it and then I found your post.

        Liked by 1 person

  6. Era says:

    Thanks for sharing this, Anisha ☺

    Liked by 1 person

    1. Anisha says:

      I’m pleased to know you found this informative, Era! (:

      Like

      1. Era says:

        it is indeed 😊

        Liked by 1 person

  7. Waiting for more blogging tips from you. Thank you for sharing.

    Liked by 1 person

    1. Anisha says:

      I’m pleased to know you liked this. I’ll certainly share more in the coming times. 😊

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s