Tessisamess

Previous | Next

How to Use the Details Tag




How to use & style the details tag!

You've seen [info]marlovian and I both use this tag recently—now learn how to use it for yourself! The details tag can be used for pretty much anything. Long history sections, tabbed information, character rosters; the sky's pretty much the limit, is what I'm saying.

But what is the details tag and how does it work? Read on to learn the basics and how to style each component of this very easy-to-use HTML tag! Note that it does not work in IE, but what does work in that browser, am I right?

What is this tag and what does it do?

Here is W3School's sussinct and easy to understand explanation:
• The <details> tag specifies additional details that the user can view or hide on demand.

• The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.

• The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details. (My note: Leaving this tag out will default the summary to displaying "Details" as the title, so you can leave this tag out if you want to.)

How to set it up!

Using the basic <details> tag is as easy as 1-2-3! Your basic setup would be something like this:

<details>
        <summary>
Summary Here</summary>
        Hidden details here
</details>


This gives you this:

Summary Here Hidden details here


Variation: Leave it open

<details open>
        <summary>
Summary Here</summary>
        These details are displayed by default, but you can close it if you want!
</details>


This gives you this:

Summary Here These details are displayed by default, but you can close it if you want!


Variation: No summary specification

<details>
        Hidden details here
</details>


This gives you this:

Hidden details here


Yes, that's really it. Two tags and you can expand and hide with the click of a button! But we can do better, right? The best part of HTML is the CSS that goes along with it! So let's learn how to style this thing.

Making it pretty!

Obviously the default is... a little lacking. If you're using this tag inside of a pre-styled page that's usually not a big deal, but for bigger features and in-entry codes most of you probably want something that stands out a little more. So let's make that happen!

The default coding for a details tag is display:block; (yep, that's it!) so you won't have to override anything to reset the CSS. That makes this even easier to work with! Take your preferred details tag and add in style tags (if this is integrated into a layout, do your CSS in the layout CSS instead.)

<details style="YOURSTYLING">
        <summary style="YOURSTYLING">
Summary Here</summary>
        Hidden details here
</details>


One thing you may have noticed is that when you hover the summary the cursor doesn't change. Personally, that really bugs the shit out of me, so I always add cursor:pointer; to the summary tag's styling so that it's more readily apparent that you can click the title the same way you would a link.

Another important thing to note is the space where you write your information. You can nest divs here, so if you were wanting to do a cast list with hidden sections, all you'd need to do is put each cast list code where the hidden details go! This is also an important note, because if you want to style ONLY the inside details you'll need to give it its own special div inside the tag. So let's see what the things I'm talking about look like in action!

<details style="YOURSTYLING">
        <summary style="cursor:pointer;">
Summary Here</summary>
        <div style="YOURSTYLING">

        Hidden details here
        </div>
</details>


STOP! Demo time!

Now that we understand where each piece goes and how to style it, let's see a styled one in action with everything I've talked about! This is just teeny little base, so feel free to use it to build on; no credit needed.

A demo with a little flavor!
Check it out! This details tag has a background for the entire set of details, as well as a special div for the hidden contents with its own background. You can specialize any section of this, so if you wanted the summary to have a different font you'd just put it into the summary styling.

You can also use multiple divs inside the details, so go crazy if you want!


This is obviously just an intro tutorial to give you the basics and let you know about how much you can put into this thing, so feel free to ask any questions below if you have questions about things I didn't cover, or if anything was unclear. Have fun, you guys!


♡ You're Done! ♡

Tags:

Comments

Oct. 18th, 2017 09:39 pm (UTC)
Your tutorials are the best! Thank you for taking time to teach us!
Oct. 19th, 2017 03:17 am (UTC)
Aw, thank you! I don't always feel like I'm a great teacher lmao, but I still really like explaining things and helping people learn, so I'm glad you find it useful! ♥
Oct. 19th, 2017 12:08 am (UTC)
oh nice! this is really cool ty!!
Oct. 19th, 2017 03:19 am (UTC)
No problem; I'm glad you like it! ♥ (PS, your icons are honestly the bomb dot com. They look so good!)
Oct. 19th, 2017 05:42 pm (UTC)
ahh thank you so much! i drool over your code all the time <3
Oct. 19th, 2017 04:08 am (UTC)
This is fantastic!
Oct. 19th, 2017 09:45 pm (UTC)
Thank you! ♥
Oct. 19th, 2017 01:28 pm (UTC)
This is amazing! Thank you for the lesson! :)
Oct. 19th, 2017 09:46 pm (UTC)
Aw, tysm! You're welcome; it was a lot of fun!
Oct. 19th, 2017 02:38 pm (UTC)
Yesssss. ♥ This is so easy. ♥
Oct. 19th, 2017 09:46 pm (UTC)
Yesss, dude. I love this tag lmfao.
Oct. 19th, 2017 09:33 pm (UTC)
I totally used this over here and it was super easy to add in and made abilities & skills not be overwhelming!

http://behindthemask.insanejournal.com/3129.html#cutid1

Thank you for your tutorials, they make my life infinitely better and prettier! :D
Oct. 19th, 2017 09:45 pm (UTC)
Oh, that's awesome!! (The whole bio code looks great tho, I looove your header image.) I'm glad it was easy to follow along and use! ♥
Oct. 19th, 2017 10:04 pm (UTC)
I saw that bio code and I was like I MUST USE IT, so pretttty! I still need to finish up some of the pages, but I'm loving it so far!
Oct. 24th, 2017 12:55 am (UTC)
Thank you so much. I had no idea this existed, and now it will be my new favorite thing. <3
Oct. 24th, 2017 07:13 pm (UTC)
You're so welcome! This tag is honestly such a great tool, I hope you have fun with it! ♥
(Anonymous)
Oct. 24th, 2017 07:38 pm (UTC)
this is a serious lifesaver! thank you!
Oct. 25th, 2017 03:32 am (UTC)
No problem at all! ♥
Oct. 30th, 2017 06:10 am (UTC)
brilliant!

ha! who needs ugly lj-cut tags now? not us.
Oct. 30th, 2017 07:55 pm (UTC)
THIS IS SO TRUE LMAO.
Oct. 31st, 2017 05:01 am (UTC)
a player in one of the games i'm in was using it and found that it's even more brilliant since it works on mobile devices as well - so that's pretty darn cool
Oct. 30th, 2017 11:21 pm (UTC)
This is so helpful! I love it!