AwesomO: /* Full Example Page */

2026-04-27T01:08:48Z

Full Example Page

@@ Line 132: / Line 132: @@
 </html>
 </pre>
 </pre>
 === Tips===

AwesomO: 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===

    What you will like
         This content is hidden until clicked.
  print "hello content"

=== Optional CSS Styling===

 body {..."

2026-04-27T01:02:11Z

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 {..."

New page

== 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 {
font-family: sans-serif;
}

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

summary {
font-weight: bold;
cursor: pointer;
}
</pre>

=== Dark Mode (Optional)===

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

summary {
color: #fff;
}
}
</pre>

=== Full Example Page===

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

=== Tips===

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

<div class="toccolours mw-collapsible mw-collapsed">
The CSS explained:
<div class="mw-collapsible-content">

'''What is CSS?'''

CSS is what makes things look nice.

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

----

'''The Page (body)'''
<pre>
body {
font-family: sans-serif;
max-width: 800px;
margin: 40px auto;
padding: 20px;
}
</pre>

This controls the whole page:

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

----

'''The Box (details)'''
<pre>
details {
border: 1px solid #aaa;
margin: 20px 0;
padding: 5px;
background: #f9f9f9;
}
</pre>

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)'''
<pre>
summary {
font-weight: bold;
cursor: pointer;
}
</pre>

This is what you click:

* Bold text
* Mouse turns into a hand

----

'''Dark Mode (automatic)'''
<pre>
@media (prefers-color-scheme: dark) {
</pre>

This means:

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

----

'''Dark Mode Colours'''
<pre>
body {
background: #111;
color: #ddd;
}

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

summary {
color: #fff;
}
</pre>

This makes:

* Dark background
* Light text
* Darker boxes

----

'''How to Change Colours'''

* Darker background → change <code>#111</code>
* Lighter text → change <code>#ddd</code>
* Box color → change <code>#222</code>

Examples:

* <code>#000</code> = pure black
* <code>#fff</code> = pure white
* <code>#1a1a1a</code> = softer black

----

'''Force Dark Mode (always on)'''

Remove the <code>@media</code> line and just use:

<pre>
body {
background: #111;
color: #ddd;
}
</pre>

----

'''Super Simple Summary'''

* CSS = makes things look nice
* details = the box
* summary = the clickable title
* dark mode = automatic color switch

</div>
</div>

HTML Expanding info box - Revision history

AwesomO: /* Full Example Page */