The <details> and <summary> tags are a handy way to collapse content without the need for CSS rules or JavaScript. However, not all browsers support this feature, namely Edge. How will you start?
How will you nest the tags?
Nope :|
<summary> <details>Show Content</details> <p> Content </p> </summary>
Your Score: 0/100
Great! You've implemented the <details> and <summary> tags on your webpage. It won't work for every user, but who wants to support Edge anyway, right? Hmm...
<details> <summary>Show Content</summary> <p> Content </p> </details>
Your Score: 65/100
Will you default to <details> and <summary> tags if the browser supports them, or only use JavaScript to simulate the tags?
How will you determine whether to use the tags or simulate them?
After a lot of troubleshooting, you've managed to do it! Of course, the User Agent string isn't very reliable, and as browsers release new versions, you'll need to update your script to ensure it keeps working. There's a better solution, give it another try! (Consider reading the MDN article on the subject as well: Browser detection using the user agent.)
Your Score: 70/100
It took a little research, but you found out how to detect whether the <details> and <summary> tags work by testing the functionality through Modernizr. If the feature isn't available, you just toggle the tags with some jQuery event listeners. Way to go! The only caveat is that your users need to have JavaScript enabled for this to work. Could there be a better way? (Check out this Stack Overflow post about how to do this solution Correct way to user Modernizr to detect IE.)
Your Score: 90/100
This way is pretty sensible. A little Bootstrap will go a long way. Your users do need to have JavaScript available and enabled in their browser, though; could there be a more inclusive solution?
<div class="btn btn-default" data-toggle="collapse" href="#details">Show Content</div> <div class="collapse" id="details"> <p> Content </p> </div>
Your Score: 85/100
How will you keep track of whether the content of the details tag is visible or hidden?
That'll work, but only while the mouse button is held down :|
Content
Your Score: 0/100
That doesn't simulate the right functionality at all...
Content
Your Score: 0/100
It's perfect! It doesn't require JavaScript, it'll work on the widest variety browsers, and it's the simplest solution that closely simulates the <details> and <summary> tags' functionality. Way to go!
In case it wasn't obvious: This is the solution I went with :D
Your Score: 100/100