Tutorialspoint.dev

HTML | DOM console.groupCollapsed() Method

The console.groupCollapsed() method in HTML is used to create a collapsed group of messages in the console. It indicates the start of a collapsed message group and all the messages written after calling the console.groupCollapsed() method will written inside the message group. The label is sent as an optional parameter to the console.groupCollapsed() method.

Syntax:

console.groupCollapsed( label )

Parameters: This method accepts single parameter label which is optional and used to specify the label for the collapsed group.

Below program illustrates the console.groupCollapsed() method in HTML:

Example 1:



<!DOCTYPE html>
<html>
    <head
        <title>DOM console.groupCollapsed() Method</title
        <style
            h1 { 
                color:green; 
            
            h2 {
                font-family: Impact;
            }
            body     { 
                text-align:center; 
            
        </style
    </head>
    <body>
        <h1>GeeksforGeeks</h1
        <h2>DOM console.groupCollapsed( ) Method</h2
        <p>To view the message in the console press the F12 
        key on your keyboard.</p>
        <script>
            console.log("GeeksforGeeks offers the following courses :");
            console.group("Courses");
            console.log("1. fork python");
            console.log("2. fork cpp");
            console.log("3. fork java");
            console.log("4. Interview preparation");
            console.groupCollapsed();
            console.log("GeeksforGeeks offers tutorials on the" +
            "following data structures :");
            console.log("1. Array");
            console.log("2. Linked List");
            console.log("3. Stack");
            console.log("4. Queue");
            console.groupEnd();
        </script>
    </body>
</html>                    

Output:

Console View:

Example 2: Using the label parameter with the console.groupCollapsed() method

<!DOCTYPE html>
<html>
    <head
        <title>DOM console.groupCollapsed() Method</title
        <style
            h1 { 
                color:green; 
            
            h2 {
                font-family: Impact;
            }
            body { 
                text-align:center; 
            
        </style
    </head>
    <body>
        <h1>GeeksforGeeks</h1
        <h2>DOM console.groupCollapsed() Method</h2
        <p>To view the message in the console press the F12 
        key on your keyboard.</p>
        <script>
            console.log("GeeksforGeeks offers the following courses :");
            console.group("Courses");
            console.log("1. fork python");
            console.log("2. fork cpp");
            console.log("3. fork java");
            console.log("4. Interview preparation");
            console.groupCollapsed("Data Structures");
            console.log("GeeksforGeeks offers tutorials on the" +
            "following data structures :");
            console.log("1. Array");
            console.log("2. Linked List");
            console.log("3. Stack");
            console.log("4. Queue");
            console.groupEnd();
        </script>
    </body>
</html>                    

Output:

Console View:

Supported Browsers: The browser supported by console.groupCollapsed() method are listed below:

  • Google Chrome 6.0
  • Apple Safari 5.1
  • Firefox 9.0
  • Opera
  • Internet Explorer 11.0


This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter