An Interest In:
Web News this Week
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
- April 8, 2024
- April 7, 2024
Quick Tip: The Awesome Details Element
One of my favorite new HTML5 tags, which has only recently been integrated into Chrome (as of version 12), is the details
element. I’ll show you to use it in today’s quick tip.
What Does the details
Tag Do?
It essentially allows us to show and hide content with the click of a button. You’re surely familiar with this type of effect, but, up until now, it had always been achieved with JavaScript. Imagine a heading with an arrow next to it, and when you click on it, additional information below becomes visible. Clicking the arrow again hides the content. This sort of functionality is very common in FAQ pages.
Here’s a two minute example of this sort of effect. (Type
Control + Enter
to process the JavaScript.)
The details
element allows us to omit the JavaScript entirely. Or, better put, it eventually will. Browser support is still a bit sparse.
An Example
So let’s dive in and learn how to use this new tag. We begin by creating a new details
element.
<details></details>
Next, we need to give it a title, or summary
of the content within.
<details><summary> Who Goes to College? </summary></details>
By default, in browsers that understand the details
element, everything within it — other than the summary
tag — will be hidden. Let’s add a paragraph after the summary
.
<details><summary> Who Goes to College? </summary> <p> Your mom. </p></details>
Go ahead and try the demo out in Chrome 12 or higher (as of November 17th, 2011).
Okay, let’s do something a bit more practical. I want to display various Nettuts+ articles using the details
element. We first create the markup for a single article.
<details> <summary>Dig Into Dojo</summary> <img src="https://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg" alt="Dojo" /> <div> <h3> Dig into Dojo: DOM Basics </h3> <p>Maybe you saw that tweet: jQuery is a gateway drug. It leads to full-on JavaScript usage. Part of that addiction, I contend, is learning other JavaScript frameworks. And thats what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction. </p> </div></details>
Next, we’ll give it just a touch of styling.
body { font-family: sans-serif; }details { overflow: hidden; background: #e3e3e3; margin-bottom: 10px; display: block;}details summary { cursor: pointer; padding: 10px;}details div { float: left; width: 65%;}details div h3 { margin-top: 0; }details img { float: left; width: 200px; padding: 0 30px 10px 10px;}
Please note that I’m showing you the open
state for convenience, but, when the page loads, you’ll only see the summary
text.
If you’d prefer to be in this state by default, add the
open
attribute to thedetails
element:<details open>
Conclusion
It’s certainly a simple effect, but it sure is nice to have such a common feature built-in. Until we can reliably use the details
element across all browsers, you can use this polyfill to provide fallback support.
Original Link: http://feedproxy.google.com/~r/nettuts/~3/b6Cp16tv4LI/
TutsPlus - Code
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.More About this Source Visit TutsPlus - Code