Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 26 Jul, 2021

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: 
 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!