Let's do a very simple FAQ page with HTML and CSS entries. Simply create an HTML page using your favorite portal. You can add the link to the menu via Subs.php and have a cool looking FAQ page.
The CSS, put this chunk at the very end of your theme's CSS file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#card {
background: #fff;
color: #333;
margin: 10rem auto;
width: 90%;
max-width: 1200px;
min-height: 30rem;
border-radius: 2rem;
}
#hero {
display: flex;
justify-content: center;
transform: translateY(-55%);
}
#hero .img {
filter: drop-shadow(0rem 1.5rem rgba(0,0,0,0.1));
transition: 0.3s ease-out;
}
#card:hover .img {
filter: drop-shadow(0rem 2.5rem rgba(0,0,0,0.1));
}
#title {
text-align: center;
font-size: 5rem;
padding: 1rem;
}
#acc-container {
padding: 4rem 2rem;
}
#acc-btn {
width: 100%;
padding: 1.6rem 2rem;
font-size: 1.6rem;
cursor: pointer;
background: inherit;
border: none;
outline: none;
text-align: left;
transition: all 0.5s linear;
}
#acc-btn:after {
content: "\27A4";
color: #fa8d0c;
float: right;
transition: all 0.3s linear;
}
#acc-btn.is-open:after {
transform: rotate(90deg);
}
#acc-btn:hover, #acc-btn.is-open {
color: #000;
font-weight: bold;
}
#acc-content {
max-height: 0;
color: rgba(0,0,0,0.75);
font-size: 1.5rem;
margin: 0 2rem;
padding-left: 1rem;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
border-bottom: 1px solid #ccc;
}
The HTML, create an HTML page using your portal.
<div id="card">
<div id="hero">
<img src="https://raw.githubusercontent.com/ArtemPonomarenko/FAQ-Accordion/main/images/illustration-woman-online-mobile.svg" alt="section image" class="img">
</div>
<h2 id="title">FAQ</h2>
<div id="acc-container">
<button id="acc-btn">What is the definition of a will?</button>
<div id="acc-content">
<p>
It is a dead giveaway.
</p>
</div>
<button id="acc-btn">
What happens to chemists when they die?
</button>
<div id="acc-content">
<p>
We barium [bury them].
</p>
</div>
<button id="acc-btn">
Why does the leopard find it difficult to hide and stalk?
</button>
<div id="acc-content">
<p>
Because he is spotted always.
</p>
</div>
<button id="acc-btn">
What kind of key opens a banana?
</button>
<div id="acc-content">
<p>A monkey. 🙈</p>
</div>
<button id="acc-btn">
Where does a tree store it's stuff?
</button>
<div id="acc-content">
<p>In it's Trunk.</p>
</div>
<button id="acc-btn">
What dog is known for its punctuality?
</button>
<div id="acc-content">
<p>The watch-dog 🐕</p>
</div>
<button id="acc-btn">
Name a thing that has four wheels and flies?
</button>
<div id="acc-content">
<p>The garbage truck, of course.</p>
</div>
<button id="acc-btn">
Why was everyone so tired on the First of April?
</button>
<div id="acc-content">
<p>Because they had just completed a March of 31 days.</p>
</div>
</div>
</div>
The script, to be put below the 'body' in index.template.php
<script>
const btns = document.querySelectorAll("#acc-btn");
// fn
function accordion() {
// this = the btn | icon & bg changed
this.classList.toggle("is-open");
// the acc-content
const content = this.nextElementSibling;
// IF open, close | else open
if (content.style.maxHeight) content.style.maxHeight = null;
else content.style.maxHeight = content.scrollHeight + "px";
}
// event
btns.forEach((el) => el.addEventListener("click", accordion));
</script>
Reference:
FAQ Accordion