How to Create a Summary Element that can Expands but never Shrink using HTML ?
It can be seen in many websites like reading more buttons containing a link. These things expand when the user clicks the read more link or button then after expanding there was no option for collapsing the expanded content. In this article, we will remove that collapsing option. We required two elements <details> and <summary> to create that kind of interface, by applying a CSS “display: none;” property.
This feature is not a good option but few developers asked to design this kind of interface by applying the CSS display:none; property. We can remove the collapsing option from summary.
Below example illustrate the above approach:
Syntax:
<style>
details[open] summary {
display: none;
}
<style>Example:
html
<!DOCTYPE html><html><head> <title> Create a details element that opens but never closes </title> <style> .container { text-align: center; } h1 { color: green; } details[open] summary { display: none; } </style></head><body> <div class="container"> <h1>GeeksforGeeks</h1> <p> This paragraph will expand but not collapsed after expanding </p> <details> <summary>Expand</summary> A Computer Science Portal for Geeks </details> </div></body></html> |
Output:
Please Login to comment...