Wire it all up...
This commit is contained in:
@@ -1,364 +1,317 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Welcome to Email from mifi Ventures</title>
|
||||
<meta name="description" content="Setup help for users of Email from mifi Ventures">
|
||||
<style>
|
||||
:root {
|
||||
--accent: #4f46e5;
|
||||
--accent-light: #6366f1;
|
||||
--background: #f7fafc;
|
||||
--surface: #fff;
|
||||
--text-main: #1a202c;
|
||||
--text-muted: #64748b;
|
||||
--radius: 1.25rem;
|
||||
--shadow: 0 2px 12px 0 rgba(20,30,60,0.09);
|
||||
--table-bg: transparent;
|
||||
--accordion-bg: #fff;
|
||||
--content-bg: #f8fafc;
|
||||
--faq-a: #333;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--accent: #a5b4fc;
|
||||
--accent-light: #818cf8;
|
||||
--background: #171923;
|
||||
--surface: #22243a;
|
||||
--text-main: #e7eaf8;
|
||||
--text-muted: #b4b9d1;
|
||||
--shadow: 0 2px 16px 0 rgba(8,8,24,0.24);
|
||||
--table-bg: #252745;
|
||||
--accordion-bg: #24264a;
|
||||
--content-bg: #21223a;
|
||||
--faq-a: #b7badf;
|
||||
}
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--background);
|
||||
color: var(--text-main);
|
||||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
||||
font-size: 17px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.container {
|
||||
max-width: 580px;
|
||||
margin: 2.5rem auto 1.5rem auto;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 2.5rem 2rem 2rem 2rem;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
.intro {
|
||||
text-align: center;
|
||||
margin-bottom: 1.7rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.general-settings {
|
||||
background: var(--content-bg);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.2rem 1.1rem 1.1rem 1.1rem;
|
||||
margin-bottom: 2.1rem;
|
||||
box-shadow: 0 1px 6px 0 rgba(90,100,140,0.06);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.general-settings h2 {
|
||||
font-size: 1.14rem;
|
||||
margin: 0 0 0.6rem 0;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1em;
|
||||
background: var(--table-bg);
|
||||
}
|
||||
td {
|
||||
padding: 0.38em 0.5em;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
td:first-child {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
width: 44%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tip {
|
||||
background: #eef2ff;
|
||||
color: var(--accent-light);
|
||||
border-radius: 0.7em;
|
||||
font-size: 0.98em;
|
||||
padding: 0.48em 0.8em;
|
||||
display: inline-block;
|
||||
margin: 0.3em 0 0.2em 0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.tip { background: #232555; color: #a5b4fc; }
|
||||
}
|
||||
.accordion {
|
||||
margin: 1.5rem 0 1rem 0;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 6px 0 rgba(90,100,140,0.06);
|
||||
background: var(--accordion-bg);
|
||||
}
|
||||
.accordion-section {
|
||||
border-top: 1px solid #eee;
|
||||
background: var(--accordion-bg);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.accordion-section {
|
||||
border-top: 1px solid #28284b;
|
||||
}
|
||||
}
|
||||
.accordion-section:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.accordion-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.12rem;
|
||||
padding: 1.1rem 1.2rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
transition: background 0.2s;
|
||||
color: var(--text-main);
|
||||
outline: none;
|
||||
gap: 0.6em;
|
||||
position: relative;
|
||||
}
|
||||
.accordion-trigger:hover, .accordion-trigger:focus {
|
||||
background: var(--background);
|
||||
}
|
||||
.accordion-trigger .icon {
|
||||
margin-right: 0.5em;
|
||||
font-size: 1.3em;
|
||||
opacity: 0.86;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.accordion-trigger[aria-expanded="true"] .icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--content-bg);
|
||||
transition: max-height 0.3s cubic-bezier(.7,0,.3,1);
|
||||
font-size: 1rem;
|
||||
padding: 0 1.5rem;
|
||||
color: var(--text-main);
|
||||
}
|
||||
.accordion-section.open .accordion-content {
|
||||
padding: 1.2rem 1.5rem 1.3rem 1.5rem;
|
||||
max-height: 1000px;
|
||||
transition: max-height 0.5s cubic-bezier(.7,0,.3,1);
|
||||
}
|
||||
.faq-q {
|
||||
font-weight: 600;
|
||||
margin-top: 0.8em;
|
||||
color: var(--accent);
|
||||
}
|
||||
.faq-a {
|
||||
margin: 0.1em 0 0.6em 0.3em;
|
||||
color: var(--faq-a);
|
||||
}
|
||||
.footer {
|
||||
margin-top: 2.5em;
|
||||
text-align: center;
|
||||
color: #bbb;
|
||||
font-size: 0.94em;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.container { padding: 1.1rem 0.5rem 1rem 0.5rem;}
|
||||
h1 { font-size: 1.36rem; }
|
||||
.general-settings { padding: 0.8rem 0.6rem 0.8rem 0.6rem; }
|
||||
.general-settings h2 { font-size: 1rem; }
|
||||
.accordion-trigger { font-size: 1rem; padding: 0.93rem 0.8rem;}
|
||||
.accordion-section.open .accordion-content { padding: 0.7rem 0.8rem 0.9rem 0.8rem; }
|
||||
td { font-size: 0.98em;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Welcome to Email from mifi Ventures</h1>
|
||||
<div class="intro">
|
||||
<strong>Let’s get your inbox ready! 📬</strong><br>
|
||||
<p>Friendly help for setting up your email—works with Outlook, Apple Mail, Thunderbird, phones, and more.</p>
|
||||
</div>
|
||||
<head>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-NF64QMKWX6"
|
||||
></script>
|
||||
<script
|
||||
defer
|
||||
src="/assets/js/ga-init.js"
|
||||
data-ga-id="G-NF64QMKWX6"
|
||||
></script>
|
||||
|
||||
<section class="general-settings" aria-label="General Email Settings">
|
||||
<h2>General Settings (All Clients)</h2>
|
||||
<table>
|
||||
<tr><td>Email Address</td><td>your.name@yourdomain.com</td></tr>
|
||||
<tr><td>Username</td><td>your.name@yourdomain.com</td></tr>
|
||||
<tr><td>Password</td><td>(your email password)</td></tr>
|
||||
<tr><td>Incoming Server</td><td><b>mail.mifi.holdings</b></td></tr>
|
||||
<tr><td>Outgoing Server</td><td><b>mail.mifi.holdings</b></td></tr>
|
||||
<tr><td>IMAP Port</td><td>993 (SSL/TLS)</td></tr>
|
||||
<tr><td>POP3 Port</td><td>995 (SSL/TLS)</td></tr>
|
||||
<tr><td>SMTP Port</td><td>587 (STARTTLS) or 465 (SSL/TLS)</td></tr>
|
||||
<tr><td>Authentication</td><td>Required (use same as incoming)</td></tr>
|
||||
<tr><td>Encryption</td><td>SSL/TLS or STARTTLS</td></tr>
|
||||
</table>
|
||||
<span class="tip">Tip: Always use your <b>full email address</b> as your username!</span>
|
||||
</section>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>mifi Holdings — Email Setup & Help</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Setup help for users of Email from mifi Holdings"
|
||||
/>
|
||||
<link rel="canonical" href="https://mail.mifi.holdings/help" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="author" content="Mike Fitzpatrick (mifi)" />
|
||||
|
||||
<div class="accordion" id="helpAccordion">
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/svg+xml"
|
||||
href="/assets/images/favicon.svg"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/x-icon"
|
||||
href="/assets/images/favicon.ico"
|
||||
/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/assets/images/apple-touch-icon.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="/assets/css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container faq">
|
||||
<h1 class="text-center">Welcome to Email from mifi Ventures</h1>
|
||||
<div class="intro">
|
||||
<strong>Let's get your inbox ready! 📬</strong><br />
|
||||
<p>
|
||||
Friendly help for setting up your email—works with Outlook,
|
||||
Apple Mail, Thunderbird, phones, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Outlook -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Microsoft Outlook
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Go to <b>File → Add Account</b></li>
|
||||
<li>Enter your full email address</li>
|
||||
<li>Choose <b>Advanced options</b> → check “Set up manually”</li>
|
||||
<li>Select <b>IMAP</b> (recommended) or POP</li>
|
||||
<li>Incoming server: <code>mail.mifi.holdings</code>, port <b>993</b> (SSL/TLS)</li>
|
||||
<li>Outgoing server: <code>mail.mifi.holdings</code>, port <b>587</b> (STARTTLS) or <b>465</b> (SSL/TLS)</li>
|
||||
<li>Username: full email address; Password: your password</li>
|
||||
<li>Click <b>Connect</b></li>
|
||||
</ol>
|
||||
<span class="tip">If sending fails, make sure “Require logon using SPA” is <b>unchecked</b>.</span>
|
||||
<section
|
||||
class="general-settings"
|
||||
aria-label="General Email Settings"
|
||||
>
|
||||
<h2>General Settings (All Clients)</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Email Address</td>
|
||||
<td>your.name@yourdomain.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Username</td>
|
||||
<td>your.name@yourdomain.com</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Password</td>
|
||||
<td>(your email password)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Incoming Server</td>
|
||||
<td><b>mail.mifi.holdings</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Outgoing Server</td>
|
||||
<td><b>mail.mifi.holdings</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IMAP Port</td>
|
||||
<td>993 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>POP3 Port</td>
|
||||
<td>995 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SMTP Port</td>
|
||||
<td>587 (STARTTLS) or 465 (SSL/TLS)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Authentication</td>
|
||||
<td>Required (use same as incoming)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Encryption</td>
|
||||
<td>SSL/TLS or STARTTLS</td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="tip"
|
||||
>Tip: Always use your <b>full email address</b> as your
|
||||
username!</span
|
||||
>
|
||||
</section>
|
||||
|
||||
<div class="accordion" id="helpAccordion">
|
||||
<!-- Outlook -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Microsoft Outlook
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Go to <b>File → Add Account</b></li>
|
||||
<li>Enter your full email address</li>
|
||||
<li>
|
||||
Choose <b>Advanced options</b> → check “Set up
|
||||
manually”
|
||||
</li>
|
||||
<li>Select <b>IMAP</b> (recommended) or POP</li>
|
||||
<li>
|
||||
Incoming server:
|
||||
<code>mail.mifi.holdings</code>, port
|
||||
<b>993</b> (SSL/TLS)
|
||||
</li>
|
||||
<li>
|
||||
Outgoing server:
|
||||
<code>mail.mifi.holdings</code>, port
|
||||
<b>587</b> (STARTTLS) or <b>465</b> (SSL/TLS)
|
||||
</li>
|
||||
<li>
|
||||
Username: full email address; Password: your
|
||||
password
|
||||
</li>
|
||||
<li>Click <b>Connect</b></li>
|
||||
</ol>
|
||||
<span class="tip"
|
||||
>If sending fails, make sure “Require logon using
|
||||
SPA” is <b>unchecked</b>.</span
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Apple Mail -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Apple Mail (macOS, iOS)
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>
|
||||
Add Account → <b>Other Mail Account</b>
|
||||
</li>
|
||||
<li>Enter your name, email, and password</li>
|
||||
<li>
|
||||
Incoming/Outgoing server:
|
||||
<code>mail.mifi.holdings</code>
|
||||
</li>
|
||||
<li>
|
||||
IMAP port: <b>993</b> (SSL); SMTP port:
|
||||
<b>587</b> (STARTTLS) or <b>465</b> (SSL)
|
||||
</li>
|
||||
<li>Use full email address for username</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Thunderbird -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Thunderbird
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Menu → Account Settings → Add Mail Account</li>
|
||||
<li>Fill in your name, email, and password</li>
|
||||
<li>
|
||||
Click “Configure manually” and use settings
|
||||
above
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mobile -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> iOS / Android Mail / Gmail
|
||||
App
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li>Add Account → Other</li>
|
||||
<li>Enter your email and password</li>
|
||||
<li>
|
||||
Manual setup: <code>mail.mifi.holdings</code>,
|
||||
correct ports, SSL/TLS required
|
||||
</li>
|
||||
<li>
|
||||
Gmail app: tap profile → Add account → Other,
|
||||
fill in details, use IMAP
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> FAQ / Troubleshooting
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<div class="faq-q">Q: My email won’t send?</div>
|
||||
<div class="faq-a">
|
||||
Check that you’re using your full email address for
|
||||
both incoming and outgoing username, and that the
|
||||
port is 587 or 465.
|
||||
</div>
|
||||
<div class="faq-q">Q: SSL/TLS errors?</div>
|
||||
<div class="faq-a">
|
||||
Ensure SSL or STARTTLS is enabled for both incoming
|
||||
and outgoing mail.
|
||||
</div>
|
||||
<div class="faq-q">Q: Still stuck?</div>
|
||||
<div class="faq-a">
|
||||
Contact
|
||||
<a href="mailto:postmaster@mifi.holdings"
|
||||
>postmaster@mifi.holdings</a
|
||||
>.<br />
|
||||
Please include any error messages, your mail app,
|
||||
and a screenshot if you can!
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pro Tips -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Pro Tips & Advanced
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li>
|
||||
<b>IMAP syncs</b> your mail everywhere—choose
|
||||
IMAP unless you know you want POP3.
|
||||
</li>
|
||||
<li>
|
||||
Your login is always your
|
||||
<b>full email address</b>.
|
||||
</li>
|
||||
<li>
|
||||
Check your Spam/Junk folder for misfiled good
|
||||
emails.
|
||||
</li>
|
||||
<li>
|
||||
Advanced: IMAP path prefix =
|
||||
<b>(leave blank)</b>; SMTP authentication is
|
||||
always required.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="footer">
|
||||
Email from mifi Ventures · Help Page – © 2025
|
||||
mifi Ventures, LLC
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Apple Mail -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Apple Mail (macOS, iOS)
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Add Account → <b>Other Mail Account</b></li>
|
||||
<li>Enter your name, email, and password</li>
|
||||
<li>Incoming/Outgoing server: <code>mail.mifi.holdings</code></li>
|
||||
<li>IMAP port: <b>993</b> (SSL); SMTP port: <b>587</b> (STARTTLS) or <b>465</b> (SSL)</li>
|
||||
<li>Use full email address for username</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Thunderbird -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Thunderbird
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ol>
|
||||
<li>Menu → Account Settings → Add Mail Account</li>
|
||||
<li>Fill in your name, email, and password</li>
|
||||
<li>Click “Configure manually” and use settings above</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mobile -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> iOS / Android Mail / Gmail App
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li>Add Account → Other</li>
|
||||
<li>Enter your email and password</li>
|
||||
<li>Manual setup: <code>mail.mifi.holdings</code>, correct ports, SSL/TLS required</li>
|
||||
<li>Gmail app: tap profile → Add account → Other, fill in details, use IMAP</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> FAQ / Troubleshooting
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<div class="faq-q">Q: My email won’t send?</div>
|
||||
<div class="faq-a">Check that you’re using your full email address for both incoming and outgoing username, and that the port is 587 or 465.</div>
|
||||
<div class="faq-q">Q: SSL/TLS errors?</div>
|
||||
<div class="faq-a">Ensure SSL or STARTTLS is enabled for both incoming and outgoing mail.</div>
|
||||
<div class="faq-q">Q: Still stuck?</div>
|
||||
<div class="faq-a">Contact <a href="mailto:postmaster@mifi.holdings">postmaster@mifi.holdings</a>.<br>
|
||||
Please include any error messages, your mail app, and a screenshot if you can!</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pro Tips -->
|
||||
<section class="accordion-section">
|
||||
<button class="accordion-trigger" aria-expanded="false">
|
||||
<span class="icon">▶</span> Pro Tips & Advanced
|
||||
</button>
|
||||
<div class="accordion-content">
|
||||
<ul>
|
||||
<li><b>IMAP syncs</b> your mail everywhere—choose IMAP unless you know you want POP3.</li>
|
||||
<li>Your login is always your <b>full email address</b>.</li>
|
||||
<li>Check your Spam/Junk folder for misfiled good emails.</li>
|
||||
<li>Advanced: IMAP path prefix = <b>(leave blank)</b>; SMTP authentication is always required.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<div class="footer">
|
||||
Email from mifi Ventures · Help Page – © 2025 mifi Ventures, LLC
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// Native accessible accordion
|
||||
document.querySelectorAll('.accordion-trigger').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const section = btn.closest('.accordion-section');
|
||||
const expanded = btn.getAttribute('aria-expanded') === "true";
|
||||
document.querySelectorAll('.accordion-section').forEach(s => {
|
||||
if (s === section) {
|
||||
s.classList.toggle('open', !expanded);
|
||||
btn.setAttribute('aria-expanded', String(!expanded));
|
||||
const content = btn.nextElementSibling;
|
||||
content.style.maxHeight = !expanded ? (content.scrollHeight+40) + "px" : "0px";
|
||||
} else {
|
||||
s.classList.remove('open');
|
||||
s.querySelector('.accordion-trigger').setAttribute('aria-expanded', "false");
|
||||
s.querySelector('.accordion-content').style.maxHeight = "0px";
|
||||
}
|
||||
});
|
||||
});
|
||||
// Allow arrow navigation
|
||||
btn.addEventListener('keydown', function(e) {
|
||||
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
||||
const triggers = Array.from(document.querySelectorAll('.accordion-trigger'));
|
||||
let idx = triggers.indexOf(e.target);
|
||||
if (e.key === "ArrowDown") idx = (idx + 1) % triggers.length;
|
||||
else idx = (idx - 1 + triggers.length) % triggers.length;
|
||||
triggers[idx].focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<script>
|
||||
// Native accessible accordion
|
||||
document.querySelectorAll('.accordion-trigger').forEach((btn) => {
|
||||
btn.addEventListener('click', function () {
|
||||
const section = btn.closest('.accordion-section')
|
||||
const expanded =
|
||||
btn.getAttribute('aria-expanded') === 'true'
|
||||
document
|
||||
.querySelectorAll('.accordion-section')
|
||||
.forEach((s) => {
|
||||
if (s === section) {
|
||||
s.classList.toggle('open', !expanded)
|
||||
btn.setAttribute(
|
||||
'aria-expanded',
|
||||
String(!expanded)
|
||||
)
|
||||
const content = btn.nextElementSibling
|
||||
content.style.maxHeight = !expanded
|
||||
? content.scrollHeight + 40 + 'px'
|
||||
: '0px'
|
||||
} else {
|
||||
s.classList.remove('open')
|
||||
s.querySelector(
|
||||
'.accordion-trigger'
|
||||
).setAttribute('aria-expanded', 'false')
|
||||
s.querySelector(
|
||||
'.accordion-content'
|
||||
).style.maxHeight = '0px'
|
||||
}
|
||||
})
|
||||
})
|
||||
// Allow arrow navigation
|
||||
btn.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
const triggers = Array.from(
|
||||
document.querySelectorAll('.accordion-trigger')
|
||||
)
|
||||
let idx = triggers.indexOf(e.target)
|
||||
if (e.key === 'ArrowDown')
|
||||
idx = (idx + 1) % triggers.length
|
||||
else idx = (idx - 1 + triggers.length) % triggers.length
|
||||
triggers[idx].focus()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user