Here’s how you can do that:
HTML
<body onload="init();">
<header id="header">
<nav>
<ul>
<li>Logo</li>
</ul>
<ul class="menu-items">
<li onClick="anchorToggle('accord1');">About</li>
<li onClick="anchorToggle('accord2');">Items</li>
<li onClick="anchorToggle('accord3');">How-to</li>
</ul>
</nav>
</header>
<section id="accordSection">
<div class="accordionWrapper">
<div class="accordionItem open">
<h2 id="accord1" class="accordionItemHeading">About accordions</h2>
<div class="accordionItemContent">
<p>JavaScript accordions let you squeeze a lot of content into a small space in a Web page.</p>
<p>Accordions also add a bit of dynamic flair to a webpage.</p>
</div>
</div>
<div class="accordionItem close">
<h2 id="accord2" class="accordionItemHeading">Accordion items</h2>
<div class="accordionItemContent">
<p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
</div>
</div>
<div class="accordionItem close">
<h2 id="accord3" class="accordionItemHeading">How to use this particular JavaScript accordion</h2>
<div class="accordionItemContent">
<p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading. Boring zzzz. Wait for it.</p>
<h2>Special Feature</h2>
<p>This demo is customised to allow the menu items to open/close corresponding accordion items. A sort of <em>remote control</em> if you will.
</p>
<p>
Try it if you haven't yet.
</p>
</div>
</div>
</div>
</section>
<button onclick="cmeToTopButton.scrollToTop(1000)" id="cme_toTopBut" title="Go to top">↑</button>
</body>
CSS
/** || General Styles */
body {
background: -webkit-linear-gradient(left, #111, #777);
background: linear-gradient(to right, #111, #777);
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
}
h1,
h2,
h3 {
font-weight: normal;
}
a {
color: white;
text-decoration: none;
border-bottom: 2px solid white;
}
a:hover {
opacity: 60%;
}
header {
display: box;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 5rem;
z-index: 10;
background-color: #212326;
min-width: 300px;
overflow-y: scroll;
font-size: 20px;
color: #efefef;
overflow: hidden;
}
header ul {
list-style: none;
display: inline-block;
}
.menu-items {
position: absolute;
right: 2rem;
}
li {
display: inline-block;
}
.menu-items li {
margin-left: 4rem;
cursor: pointer;
}
.menu-items li:hover {
border-bottom: 2px solid white;
}
/** Accordion Styles */
.accordionWrapper {
background-color: black;
padding: 30px;
width: 80%;
box-sizing: border-box;
margin: 10%;
box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
float: left;
}
.accordionWrapper:after {
content: "";
display: table;
clear: both;
}
.accordionItem {
float: left;
display: block;
width: 100%;
box-sizing: border-box;
}
.accordionItemHeading {
cursor: pointer;
margin: 0px 0px 10px 0px;
padding: 10px;
background: #111;
color: #fff;
width: 100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
}
.close .accordionItemContent {
height: 0px;
transition: height 1s ease-out;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
float: left;
display: block;
}
.open .accordionItemContent {
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
width: 100%;
margin: 0px 0px 10px 0px;
display: block;
-webkit-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: top;
-o-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease;
-ms-transition: -ms-transform 0.4s ease;
transition: transform 0.4s ease;
box-sizing: border-box;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.open .accordionItemHeading {
margin: 0px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background-color: slategray;
color: ghostwhite;
}
section {
margin: 6rem auto;
}
.filler {
color: ghostwhite;
width: 80%;
}
JS
var accItem = document.getElementsByClassName("accordionItem");
var accHD = document.getElementsByClassName("accordionItemHeading");
var firstClick;
for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener("click", toggleItem, false);
}
/* Boring */
function toggleItem() {
let itemClass = this.parentNode.className;
for (i = 0; i < accItem.length; i++) {
accItem[i].className = "accordionItem close";
}
if (itemClass == "accordionItem close") {
this.parentNode.className = "accordionItem open";
}
firstClick = false;
}
/**
* Exciting Remote Controlled Accordion!
*/
function anchorToggle(accordID) {
let accordThing = document.getElementById(accordID);
let itemClass = accordThing.parentNode.className;
if (!firstClick) {
for (i = 0; i < accItem.length; i++) {
accItem[i].className = "accordionItem close";
}
if (itemClass == "accordionItem close") {
accordThing.parentNode.className = "accordionItem open";
}
}
firstClick = false;
// Scroll to the accordion. This looks funky because
// we have to account for the fixed header.
accordThing.parentNode.parentNode.parentNode.scrollIntoView();
}
function init() {
firstClick = true;
}
. Reason: Moved to Fixing WordPress, this is not a Requests and Feedback topic
