Skip to content
Related Articles

Related Articles

How to Create a Summary Element that can Expands but never Shrink using HTML ?
  • Last Updated : 02 Mar, 2020

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:




<!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>

Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :