Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!
Office of Drug Research and Surveillance
Revision as of 08:32, 26 August 2025 by Renee.whittaker (talk | contribs)
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title>Dynamic Wikipedia Page</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
margin: 0;
padding: 0;
background: #f8f9fa;
color: #202122;
}
header {
background: #3366cc;
color: white;
padding: 1em;
text-align: center;
}
main {
display: flex;
max-width: 1200px;
margin: auto;
padding: 2em;
}
article {
flex: 3;
margin-right: 2em;
}
aside {
flex: 1;
background: #e9ecef;
padding: 1em;
border-radius: 8px;
}
h1, h2 {
border-bottom: 1px solid #ccc;
padding-bottom: 0.3em;
}
.collapsible {
background-color: #eee;
cursor: pointer;
padding: 10px;
border: none;
text-align: left;
outline: none;
font-size: 1em;
margin-top: 1em;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
footer {
text-align: center;
padding: 1em;
background: #ddd;
margin-top: 2em;
}
</style>
</head> <body>
<header>
Sample Wikipedia Page
</header>
<main>
<article>
Introduction
This is a visually dynamic version of a Wikipedia-style page. It includes collapsible sections, styled infoboxes, and a clean layout.
<button class="collapsible">History</button>
The history section can be expanded or collapsed. This adds interactivity to the page.
<button class="collapsible">Applications</button>
Applications of this layout include educational content, documentation, and personal wikis.
References
- [1] Example Reference One
- [2] Example Reference Two
</article>
<aside>
Infobox
Type: Article
Created: August 2025
Author: Renée Whittaker
</aside>
</main>
<footer>
Page generated by Copilot
</footer>
<script>
const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach(btn => {
btn.addEventListener("click", function () {
this.classList.toggle("active");
const content = this.nextElementSibling;
content.style.display = content.style.display === "block" ? "none" : "block";
});
});
</script>
</body> </html>