Hello Friends,

Today in this blog we create small project using <details> tag. Earlier I have shared blog on Mouse hover to zoom image & Button.

The <details> tag specifies additional details that the user can open and close on demand.

The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.

See also  Responsive Vertical Image Slider With Pure CSS

Any sort of content can be put inside the <details> tag. 


Most browsers will display the <details> element with the following default values:

details {
  display: block;
<!DOCTYPE html>
<!-- code by CodeitHub ( ) -->
        <details open>
            <summary> web server</summary>
            it is resembles hardware and software
            <summary> web site</summary>
            it is a virtual directory

Leave a Reply

Your email address will not be published. Required fields are marked *