This post describes how to create an interactive view/hide or expand/collapse control in HTML without JavaScript. The HTML to create this control is as follows: < details >      < summary > Show details... </ summary >      < p > Here are the details! </ p > </ details > By default, this will start collapsed / hidden: Details... Here are the details! You can add the "open" attribute to start the control in a visible / expanded state: < details   open >      < summary > Show details... </ summary >      < p > Here are the details! </ p > </ details > Details... Here are the details! Related Posts -  Remove border from details summary element in CSS

 This post describes how to remove the border from the summary element inside a details element in CSS. Create the control Create this control using the following HTML: < details >      < summary > Show more... </ summary >      < p > Here are the details. </ p > </ details > You can use this HTML to create interactive expand-and-collapse controls without any JavaScript.  Show more... Here are the details. Remove the border To remove the border, use the following CSS on the summary element details >   summary  {       outline :  none ; } Show more... Here are the details. Add a cursor pointer You can also change the cursor to a pointer to indicate to the user that they can interact with the control. details >   summary  {      outline :  none ;      cursor :  pointer ; } Show more... Here are the details.