Open In App

How to Create a Summary Element that can Expands but never Shrink using HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article we are going to learn How to create a summary Element that can Expand 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 a few developers asked to design this kind of interface by applying the CSS display: none; property. We can remove the collapsing option from the summary

Syntax: 

details[open] summary {
    display: none;
} 

Example: In this example, we are using the above-explained approach.

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: 



Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads