HTML Expanding info box: Difference between revisions

From CompleteNoobs
Jump to navigation Jump to search
VisualWikitext
AwesomO (talk | contribs)
244 edits
Created page with "== How to Add an Expanding Info Box (Simple Guide)== {| class="wikitable" |- ! Feature ! Value |- | Method | <details> + <summary> |- | JavaScript | Not needed |- | Mobile Support | Yes |- | Difficulty | Very Easy |} === Basic Example=== <pre> <details> <summary>What you will like</summary> <div> <p>This content is hidden until clicked.</p> <code>print "hello content"</code> </div> </details> </pre> === Optional CSS Styling=== <pre> body {..."
 
AwesomO (talk | contribs)
244 edits
 
Line 132: Line 132:
</html>
</html>
</pre>
</pre>
<!-- bug hunt -->
<div class="toccolours mw-collapsible mw-collapsed">
Another example:
<div class="mw-collapsible-content">
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>completenoobs.com</title>
  <style>
    body { font-family: system-ui, -apple-system, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; line-height: 1.6; }
   
    details {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin: 25px 0;
      background: #f9f9f9;
    }
    summary {
      padding: 15px 20px;
      font-weight: bold;
      cursor: pointer;
      background: #f0f0f0;
      border-radius: 8px 8px 0 0;
    }
    .mw-collapsible-content { padding: 20px; }
    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
      details { border: 1px solid #555; background: #1e1e1e; color: #ddd; }
      summary { background: #2a2a2a; color: #eee; }
      .mw-collapsible-content { color: #ccc; }
    }
  </style>
</head>
<body>
  <h1>Welcome to completenoobs.com</h1>
  <details>
    <summary>What you will like</summary>
    <div class="mw-collapsible-content">
      <p>Put all your hidden content here...</p>
        <code>print "hello content"</code>
    </div>
  </details>
</body>
</html>
</pre>
</pre>
</div>
</div>


=== Tips===
=== Tips===

Latest revision as of 01:08, 27 April 2026

How to Add an Expanding Info Box (Simple Guide)

Feature Value
Method <details> + <summary>
JavaScript Not needed
Mobile Support Yes
Difficulty Very Easy

Basic Example

<details>
  <summary>What you will like</summary>

  <div>
    <p>This content is hidden until clicked.</p>
 <code>print "hello content"</code>
  </div>

</details>

Optional CSS Styling

body {
  font-family: sans-serif;
}

details {
  border: 1px solid #aaa;
  margin: 20px 0;
  padding: 5px;
}

summary {
  font-weight: bold;
  cursor: pointer;
}

Dark Mode (Optional)

@media (prefers-color-scheme: dark) {
  details {
    background: #222;
    color: #ddd;
    border: 1px solid #555;
  }

  summary {
    color: #fff;
  }
}

Full Example Page

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example</title>

  <style>
    body {
      font-family: sans-serif;
      max-width: 800px;
      margin: 40px auto;
      padding: 20px;
    }

    details {
      border: 1px solid #aaa;
      margin: 20px 0;
      padding: 5px;
      background: #f9f9f9;
    }

    summary {
      font-weight: bold;
      cursor: pointer;
    }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
      body {
        background: #111;
        color: #ddd;
      }

      details {
        background: #222;
        border: 1px solid #555;
      }

      summary {
        color: #fff;
      }
    }
  </style>
</head>

<body>

<h1>Example Page</h1>

<details>
  <summary>What you will like</summary>
  <div>
    <p>Hidden content here...</p>
    <code>print "hello content"</code>
  </div>
</details>

</body>
</html>

Another example: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>completenoobs.com</title>
  <style>
    body { font-family: system-ui, -apple-system, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; line-height: 1.6; }
    
    details {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin: 25px 0;
      background: #f9f9f9;
    }
    summary {
      padding: 15px 20px;
      font-weight: bold;
      cursor: pointer;
      background: #f0f0f0;
      border-radius: 8px 8px 0 0;
    }
    .mw-collapsible-content { padding: 20px; }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
      details { border: 1px solid #555; background: #1e1e1e; color: #ddd; }
      summary { background: #2a2a2a; color: #eee; }
      .mw-collapsible-content { color: #ccc; }
    }
  </style>
</head>
<body>

  <h1>Welcome to completenoobs.com</h1>

  <details>
    <summary>What you will like</summary>
    <div class="mw-collapsible-content">
      <p>Put all your hidden content here...</p>
        <code>print "hello content"</code>
    </div>
  </details>

</body>
</html>

Tips

  • To open by default: <details open>
  • Duplicate the block to create more sections
  • Works without CSS (just looks basic)

The CSS explained:

What is CSS?

CSS is what makes things look nice.

  • HTML = the structure (the box)
  • CSS = the style (colors, spacing, fonts)

The Page (body) 

body {
  font-family: sans-serif;
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

This controls the whole page:

  • Changes the font
  • Keeps the page centered
  • Adds space so things are easy to read

The Box (details) 

details {
  border: 1px solid #aaa;
  margin: 20px 0;
  padding: 5px;
  background: #f9f9f9;
}

This is the expandable box:

  • Border = thin line around it
  • Margin = space outside the box
  • Padding = space inside the box
  • Background = box color

The Clickable Title (summary) 

summary {
  font-weight: bold;
  cursor: pointer;
}

This is what you click:

  • Bold text
  • Mouse turns into a hand

Dark Mode (automatic) 

@media (prefers-color-scheme: dark) {

This means:

"If the user is using dark mode, use different colors"

Dark Mode Colours 

body {
  background: #111;
  color: #ddd;
}

details {
  background: #222;
  border: 1px solid #555;
}

summary {
  color: #fff;
}

This makes:

  • Dark background
  • Light text
  • Darker boxes

How to Change Colours

  • Darker background → change #111
  • Lighter text → change #ddd
  • Box color → change #222

Examples:

  • #000 = pure black
  • #fff = pure white
  • #1a1a1a = softer black

Force Dark Mode (always on)

Remove the @media line and just use: 

body {
  background: #111;
  color: #ddd;
}

Super Simple Summary

  • CSS = makes things look nice
  • details = the box
  • summary = the clickable title
  • dark mode = automatic color switch
Retrieved from "https://www.completenoobs.com/noobs/index.php?title=HTML_Expanding_info_box&oldid=745"