Issue
How do I make a text appear in an area, on click, with only HTML?
Like a opening a hidden section with JavaScript with an on-click action, but... with only HTML.
It was on a test, so I'm hoping it isn't as impossible as it seemed, even though searching for a while still find an answer...
Solution
The details element may fit but do consider if the semantics of it meet your particular use case.
<details>
<summary>A summary goes here</summary>
<p>And longer content here.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod posuere justo, in sagittis purus rutrum sed. Ut et sollicitudin ante. Cras tristique velit id scelerisque malesuada. Maecenas finibus tortor ac venenatis maximus. Etiam sed mauris
ultricies, egestas diam et, efficitur justo. Maecenas convallis est arcu, vel faucibus risus tempus rhoncus. Donec in felis urna. Duis id quam lobortis, tempor felis quis, cursus lectus. Quisque nec finibus erat, a tincidunt leo. Nam dictum convallis
leo vel consectetur. Praesent condimentum mauris vel ante tincidunt, non dapibus nisi imperdiet. Suspendisse lacinia augue nec faucibus vehicula. Ut ex felis, dictum in vehicula ut, suscipit in mauris. Sed metus urna, tempus sed eros et, blandit ultrices
lorem. Quisque sit amet magna sed nunc feugiat finibus. Nulla quis semper tellus, ut aliquet justo.</p>
<p>Donec auctor non justo a lacinia. Aenean varius ultrices diam, et sollicitudin enim varius non. Sed lorem enim, ultrices in risus at, rutrum faucibus mi. Maecenas eu scelerisque erat, non sodales lacus. Nulla varius tristique nulla, sed ultricies mauris
fermentum quis. Pellentesque sit amet laoreet arcu. Quisque sollicitudin vitae quam eget tincidunt. Maecenas viverra erat a est vulputate pellentesque. Ut varius quis felis lobortis ullamcorper. Phasellus a sapien at sem finibus suscipit. Ut iaculis
euismod blandit. Duis convallis aliquam nulla ut efficitur. Duis pellentesque vitae augue et luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</details>
Note that browser support is relatively limited.
Answered By - Quentin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.