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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Create a details element that opens 
        but never closes
    </title>
  
    <style>
        .conatiner {
            text-align: center;
        }
              
        h1 {
            color: green;
        }
              
        details[open] summary {
            display: none;
        }
    </style>
</head>
  
<body>
    <div class="conatiner">
        <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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.