Tessisamess

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

From:
( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.