A menu with unfolding items can come handy as a table of contents for a reasonably long text—for example, in FAQs.
A step-by-step guide to making one is available at Help. It utilizes some custom code, but you needn’t know coding—just follow the instructions.
Do you have an example of a great accordion menu? Please, share!
Hey, great code, but how to reverse (slide up) the animation ? (from bottom to up)
This is a really handy feature. How do you implement text in columns into the code?
At the moment, the accordion allows you to replace the text lines within a <p> tag, but I’d like to add a 3 column text, which sits within a <div> tag. Here’s the code I’d like to add:
<div class="container">
<div class="column">
<p>Text line 1</p>
<p>Text line 2</p>
<p>Text line 3</p>
</div>
<div class="column">
<p>Text line 4</p>
<p>Text line 5</p>
<p>Text line 6</p>
</div>
<div class="column">
<p>Text line 7</p>
<p>Text line 8</p>
<p>Text line 9</p>
</div>
</div>
Let me know if there’s a solution. Thanks!
Hi @Christina please find below the code to make two columns work. I’ve also included some additional options for you that might be what you you’re looking for.
PANEL 2
This panel allows for two separate columns as you had asked for.
PANEL 3
This panel keeps everything to single lines only. I’ve include an ellipse ‘…’ for text that may exceed the column width for narrow view ports or longer text -useful for when you want everything to stay on a single line such as URL links.
PANEL 4
This panel has an option for those looking to do multiple columns with run-on text like a newspaper.
The CSS style section of the code has sections showing the different effects for each panel along with some extra notes explaining some the code.
We’ve used all of these methods on our mobile site. https://headless.horse/ 
<p class="accordion" style="border-top: 1px solid #999;">Panel 1</p>
<div class="accordion-content">
<p>Text line 1</p>
<p>Text line 2</p>
<p>Text line 3</p>
</div>
<p class="accordion">Panel 2 (seperate columns)</p>
<div class="accordion-content">
<div class="column-panel2">
<p>Text line 1</p>
<p>Text line 2</p>
<p>Text line 3</p>
</div>
<div class="column-panel2">
<p>Text line 4</p>
<p>Text line 5</p>
<p>Text line 6</p>
</div>
</div>
<p class="accordion">Panel 3 (seperate Columns single line with ellipsis)</p>
<div class="accordion-content">
<div class="column-panel3">
<p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
<p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
<p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
</div>
<div class="column-panel3">
<p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
<p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
<p><a href="https://readymag.com/examples" target="_blank">Super long url link name here</a></p>
</div>
</div>
<p class="accordion">Panel 4 (multiple columns newspaper style)</p>
<div class="accordion-content">
<p class="column-panel4">
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
<style>
/* accordion title text styles */
p.accordion {
font-family: courier;
font-size: 18px;
}
/* accordion content text styles */
.accordion-content p {
font-family: courier;
font-size: 14px;
}
/* accordion content link styles */
.accordion-content a {
font-family: courier;
font-size: 14px;
font-style: italic;
}
/* accordion title styles */
.accordion {
cursor: pointer;
padding: 15px 8px;
margin: 0;
font-weight: 300;
}
/* accordion icon box styles */
.accordion::after {
content: '✕';
float: right;
transform: rotate(-45deg);
font-size: 11px;
transition: .2s ease-out;
}
/* accordion icon box styles: opened */
.active::after {
content: "✕";
transform: rotate(0deg);
font-size: 11px;
}
/* accordion content box styles: default */
.accordion-content {
padding: 0 8px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
border-bottom: 1px solid #999;
}
/* -------------------- PANEL 2 -------------------- */
* {
box-sizing: border-box;
}
.column-panel2 {
float: left;
width: 50%;
}
.column-panel2:last-child {
width: 50%;
}
/* -------------------- PANEL 3 -------------------- */
* {
box-sizing: border-box;
}
.column-panel3>p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.column-panel3 {
float: left;
/* 10px is 1/2 of the margin-left value in .column:last-child to give the columns breathing room! */
width: calc(50% - 10px);
}
.column-panel3:last-child {
/* 10px is 1/2 of the margin-left value in .column:last-child to give the columns breathing room! */
width: calc(50% - 10px);
/* change value to match the widht calculation in .column:first-child */
margin-left: 20px;
}
/* -------------------- PANEL 4 --------------------*/
.column-panel4 {
/* This can be any value maybe you'd like 4 columns! */
column-count: 2;
}
</style>
<script>
let accordionHeading = document.querySelectorAll(".accordion");
let accordionContent = document.querySelectorAll(".accordion-content");
for (let i = 0; i < accordionHeading.length; i++) {
accordionHeading[i].onclick = function() {
if (this.nextElementSibling.style.maxHeight) {
hideContent();
} else {
showContent(this);
}
};
}
function showContent(elem) {
hideContent();
elem.classList.add("active");
elem.nextElementSibling.style.maxHeight =
elem.nextElementSibling.scrollHeight + "px";
}
function hideContent() {
for (let i = 0; i < accordionContent.length; i++) {
accordionContent[i].style.maxHeight = null;
accordionHeading[i].classList.remove("active");
}
}
</script>
Thanks for this code! Just wondering if anyone has found a way to make the content below the accordion react to the accordion content. The content needs to be pushed down when the accordion is open, so I don’t get this overlapping issue.
Any help will be massively appreciated!
Thanks 
Hi @jemima_sandison welcome to the Readymag forum!
Sadly, there isn’t a way to have a code injection element in an iFrame like this accordion to manipulate the length of a project / elements beneath. Unless you were to inject this code into the body of the project using an element’s ID to insert beneath or above?
Hello. Could you please help me? How to place a numbered list in the accordion menu? Is it possible to make the items 1, 2, 3, be on the red line.
Hi @Dmitry1 I suggest adding some ‘padding’ to the ‘.accordion-content’ class. if you get stuck paste your code in your reply / link me your project, and I will add it for you.
I have a Free Plan, I can’t add you as a collaborator.
Here’s my code:
<p class="accordion" style="border-top: 1px solid #CCFF00;">1. Скільки часу займає проходження FLUENCY BOOST?</p>
<div class="accordion-content">
<p>
– Fluency Boost триває 6 тижнів.
</p>
<br/>
</div>
<p class="accordion">2. Чи є домашні завдання? Скільки часу потрібно, щоб його виконати?</p>
<div class="accordion-content">
<p>
– Домашнs завдання є, якщо ви хочете досягти успіху в англійській їх потрібно обов'язково виконувати. Ви отримаєте цікаві матеріали та домашнє завдання до них. Будете читати статі, дивитись відео та робити ефективні вправи на розвиток мовлення. Час виконнаня домашки залежить від вас, зазвичай потребує від 30 до 60 хвилин.
</p>
<br />
</div>
<p class="accordion">3. Що таке Group Live Sessions, коли та як вони проходять?</p>
<div class="accordion-content">
<p>
– Group Live Sessions - це групові розмовні заняття, які тривають 90 хвилин. Саме тут ви практикуєтесь говорити виключно англійською та використовуєте матеріали, які пройшли на платформі. Що будете робити? Говорити, приймати участь у дебатах, дискусіях, діалогах. Наприкінці розмовної сессії ментор надасть фідбек стосовно помилок.
</p>
<br/>
</div>
<p class="accordion">4. Чи є можливість розмовляти з носіями мови?</p>
<div class="accordion-content">
<p>
– Так! Придбавши тариф UNLIMITED отримаєте безлімітний доступ на місяць до Conversation Clubs. Гарантуємо, це пришвидшить розвиток speaking skills та вже за 6 тижнів ви не впізнаєте свою англійську.
</p>
<br/>
</div>
<p class="accordion">5. Я вже займався з репетиторами та відвідував мовні школи, але досі не вільно не розмовляю англійською. Чому з вами я заговорю?</p>
<div class="accordion-content">
<p>
– У ed.lang ми фокусуємось на результат. На Fluency Boost ми не просто вчимо вас англійської, ми робимо так, щоб ви впевнено використовували англійську, незважаючи який рівень маєте.
</p>
<br/>
<p>
– Як ми це робимо?
</p>
<br/>
<p>
✔ Розробляємо цікаві матеріали, ми не використовуємо традиційні підручники.
</p>
<p>
✔ Надаємо різноманітні завдання, за допомогою яких ви навчитесь використовувати всі знання на практиці.
</p>
<p>
✔ Проводимо ефективні Group Live Sessions, де тренуєтесь розмовляти англійською спонтанно, а ментор направдяє, надає фідбек та мотивує.
</p>
<p>
✔ Створюємо реальні, стресові ситуації, де потрібно виходити з зони комфорту та розмовляти англійською, але не хвилюйтесь! Саме тому, ви маєте ментора, який зробить так, щоб від “стресових ситуацій” ви отримаєте насолоду та гарно попрактикуєте англійську.
</p>
<br/>
<p>
Саме на Fluency Boost ви звикнете розмовляти англійською.
</p>
<br/>
</div>
<p class="accordion">6. Я завершив Fluency Boost, що далі?</p>
<div class="accordion-content">
<p>
– Вітаємо, ви звикли розмовляти англійською. Далі будете працювати над збільшенням лексичного запасу, граматичних конструкцій та покращенням вимови.
</p>
<br/>
<p>
– High-Intermediate Speaking Course
</p>
<br/>
<p>
– 3
</p>
<br/>
</div>
<style>
/* accordion title text styles */
p.accordion {
font-family: montserrat;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.4px;
font-weight: 700;
color: #000000;
font-feature-settings: "lnum"
}
/* accordion content text styles */
.accordion-content p {
font-family: montserrat;
font-size: 14px;
line-height: 16px;
letter-spacing: 0px;
font-weight: 600;
color: #000000;
font-feature-settings: "lnum"
}
/* accordion title styles */
.accordion {
cursor: pointer;
padding: 15px 8px;
margin: 0;
font-weight: 300;
}.
/* accordion icon box styles */
.accordion::after {
content: '✕';
float: right;
transform: rotate(-45deg);
font-size: 16px;
transition: .2s ease-out;
}.
/* accordion icon box styles: opened */
.active::after {
content: "✕";
transform: rotate(0deg);
font-size: 16px;
}
/* accordion content box styles: default */
.accordion-content {
padding: 0 8px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
border-bottom: 1px solid #CCFF00;
}
</style>
<script>
let accordionHeading = document.querySelectorAll(".accordion");
let accordionContent = document.querySelectorAll(".accordion-content");
for (let i = 0; i < accordionHeading.length; i++) {
accordionHeading[i].onclick = function () {
if (this.nextElementSibling.style.maxHeight) {
hideContent();
} else {
showContent(this);
}
};
}
function showContent(elem) {
hideContent();
elem.classList.add("active");
elem.nextElementSibling.style.maxHeight =
elem.nextElementSibling.scrollHeight + "px";
}
function hideContent() {
for (let i = 0; i < accordionContent.length; i++) {
accordionContent[i].style.maxHeight = null;
accordionHeading[i].classList.remove("active");
}
}
</script>
Hello, im struggling to change the font to a custom one I uploaded. does anyone have any advice?
Can you show me what attributes are needed for indents? I would be eternally grateful for your help! 
@Dmitry1 I have attached the revised code here for you. added “padding-left: 20px;” at the end of the style section.
<p class="accordion" style="border-top: 1px solid #CCFF00;">1. Скільки часу займає проходження FLUENCY BOOST?</p>
<div class="accordion-content">
<p>– Fluency Boost триває 6 тижнів.</p>
<br>
</div>
<p class="accordion">2. Чи є домашні завдання? Скільки часу потрібно, щоб його виконати?</p>
<div class="accordion-content">
<p>– Домашнs завдання є, якщо ви хочете досягти успіху в англійській їх потрібно обов'язково виконувати. Ви отримаєте цікаві матеріали та домашнє завдання до них. Будете читати статі, дивитись відео та робити ефективні вправи на розвиток мовлення.
Час виконнаня домашки залежить від вас, зазвичай потребує від 30 до 60 хвилин.</p>
<br>
</div>
<p class="accordion">3. Що таке Group Live Sessions, коли та як вони проходять?</p>
<div class="accordion-content">
<p>– Group Live Sessions - це групові розмовні заняття, які тривають 90 хвилин. Саме тут ви практикуєтесь говорити виключно англійською та використовуєте матеріали, які пройшли на платформі. Що будете робити? Говорити, приймати участь у дебатах,
дискусіях, діалогах. Наприкінці розмовної сессії ментор надасть фідбек стосовно помилок.</p>
<br>
</div>
<p class="accordion">4. Чи є можливість розмовляти з носіями мови?</p>
<div class="accordion-content">
<p>– Так! Придбавши тариф UNLIMITED отримаєте безлімітний доступ на місяць до Conversation Clubs. Гарантуємо, це пришвидшить розвиток speaking skills та вже за 6 тижнів ви не впізнаєте свою англійську.</p>
<br>
</div>
<p class="accordion">5. Я вже займався з репетиторами та відвідував мовні школи, але досі не вільно не розмовляю англійською. Чому з вами я заговорю?</p>
<div class="accordion-content">
<p>– У ed.lang ми фокусуємось на результат. На Fluency Boost ми не просто вчимо вас англійської, ми робимо так, щоб ви впевнено використовували англійську, незважаючи який рівень маєте.</p>
<br>
<p>– Як ми це робимо?</p>
<br>
<p>✔ Розробляємо цікаві матеріали, ми не використовуємо традиційні підручники.</p>
<p>✔ Надаємо різноманітні завдання, за допомогою яких ви навчитесь використовувати всі знання на практиці.</p>
<p>✔ Проводимо ефективні Group Live Sessions, де тренуєтесь розмовляти англійською спонтанно, а ментор направдяє, надає фідбек та мотивує.</p>
<p>✔ Створюємо реальні, стресові ситуації, де потрібно виходити з зони комфорту та розмовляти англійською, але не хвилюйтесь! Саме тому, ви маєте ментора, який зробить так, щоб від “стресових ситуацій” ви отримаєте насолоду та гарно попрактикуєте
англійську.</p>
<br>
<p>Саме на Fluency Boost ви звикнете розмовляти англійською.</p>
<br>
</div>
<p class="accordion">6. Я завершив Fluency Boost, що далі?</p>
<div class="accordion-content">
<p>– Вітаємо, ви звикли розмовляти англійською. Далі будете працювати над збільшенням лексичного запасу, граматичних конструкцій та покращенням вимови.</p>
<br>
<p>– High-Intermediate Speaking Course</p>
<br>
<p>– 3</p>
<br>
</div>
<style>
/* accordion title text styles */
p.accordion {
font-family: montserrat;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.4px;
font-weight: 700;
color: #000000;
font-feature-settings: "lnum"
}
/* accordion content text styles */
.accordion-content p {
font-family: montserrat;
font-size: 14px;
line-height: 16px;
letter-spacing: 0px;
font-weight: 600;
color: #000000;
font-feature-settings: "lnum"
}
/* accordion title styles */
.accordion {
cursor: pointer;
padding: 15px 8px;
margin: 0;
font-weight: 300;
}
.
/* accordion icon box styles */
.accordion::after {
content: '✕';
float: right;
transform: rotate(-45deg);
font-size: 16px;
transition: .2s ease-out;
}
.
/* accordion icon box styles: opened */
.active::after {
content: "✕";
transform: rotate(0deg);
font-size: 16px;
}
/* accordion content box styles: default */
.accordion-content {
padding: 0 8px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
border-bottom: 1px solid #CCFF00;
padding-left: 20px;
}
</style>
<script>
let accordionHeading = document.querySelectorAll(".accordion");
let accordionContent = document.querySelectorAll(".accordion-content");
for (let i = 0; i < accordionHeading.length; i++) {
accordionHeading[i].onclick = function() {
if (this.nextElementSibling.style.maxHeight) {
hideContent();
} else {
showContent(this);
}
};
}
function showContent(elem) {
hideContent();
elem.classList.add("active");
elem.nextElementSibling.style.maxHeight =
elem.nextElementSibling.scrollHeight + "px";
}
function hideContent() {
for (let i = 0; i < accordionContent.length; i++) {
accordionContent[i].style.maxHeight = null;
accordionHeading[i].classList.remove("active");
}
}
</script>
Hi. There is a problem with displaying text in a block with custom code (questions). The first photo is the font that should be, the second is how it is displayed after publishing in the phone. Can you tell me how to change the font in mobile adaptive? Thank you !
Hi @Kateryna_Lubska can you share with us the full code injection have used for this section? It’s likely a problem with the font-family css. But we can easily resolve this.
@HEADLESS.HORSE do you have any tips on how to make line breaks between paragraphs the same size as the body text in this accordion menu? right now they are astronomically large:
here is the code we are using.
<!-- HTML FOR ACCORDION STRUCTURE -->
<div class="accordion-container">
<p class="accordion" style="border-top: 1px solid #014237;">social media strategy</p>
<div class="accordion-content">
<p>a top-notch social media strategy built collaboratively alongside you - the expert of your business! a social strategy is the single most foundational piece of your lasting success on any platform. this is perfect for brands who are confident in their brand identity and personality and are looking to level up on social. however, it’s also fundamental for new companies and up-and-coming brands who are preparing to launch their social presence for the first time. if you don’t have a social media strategy, you need one! and we can help you get there.
</p>
</div>
<p class="accordion">campaign development</p>
<div class="accordion-content">
<p>are you planning for the holiday season? dropping a new product during the summer? expanding your service offering? there are a million reasons to run a social media campaign. we love to work with companies to craft strategic and impactful organic social media campaigns that align with your overarching business goals.
</p>
</div>
<p class="accordion">content planning + ideation</p>
<div class="accordion-content">
<p>are you running out of post ideas? do you feel like you are saying the same thing to your audience over and over? worried about what you are posting during critical calendar moments? you might be in a position where you need to hit refresh on your content strategy. we work with new and established businesses to strengthen their content strategy and plan out what to post. whether it’s a week’s worth of content or an entire quarter, we’ll take a look at formats, visuals, messaging, copy and more!
</p>
</div>
<p class="accordion">profile optimizations</p>
<div class="accordion-content">
<p>when was the last time you took a hard look at your social profiles? probably not recently 👀 </p>
<p>this service is perfect for brands that have a ‘set it and forget it' mentality. we’ll take a deep dive into your profile to refresh the most important elements. sometimes this is a visual exercise (hello new profile pic!) and sometimes it means setting up auto-replies because you don’t have a team helping you manage those DMs. always unique to your business and the industry you operate in, profile optimizations are always beneficial. new biz owners, long-time entrepreneurs, e-commerce companies, independent contractors…come one come all.
</p>
</div>
<p class="accordion">discovery session</p>
<div class="accordion-content">
<p>a discovery session is perfect for those in need of social media support that have no idea where to start. maybe you have an idea but need some help bringing it to life. or, you might be craving a new set of eyes on your social content. we’ll chat about where you are currently and also where you want to be in the future. afterwards, we’ll put together some recommendations unique to your situation and budget! </p>
<p>don’t see an offering listed above? shoot us a note and we can discuss your project's needs. we have a collective of talent that can help bring your idea to life. </p>
</div>
</div>
<!-- CSS FOR ACCORDION STYLES -->
<style>
/* custom fonts */
/* PP Neue */
@font-face {
font-weight: 700;
font-family: 'custom_64056';
font-style: normal;
src: url("/api/fonts/630109d3a909630029798c27/n7/otf?domain=theninetiescollective.ca&md5=NXuE9ZUgxqpj1PJ0pMHVYw") format('opentype');
}
/* VT323 */
@font-face {
font-weight: 400;
font-style: normal;
font-family: 'VT323', sans-serif;
}
/* open sans */
@font-face {
font-weight: 300;
font-style: normal;
font-family: 'Open Sans', sans-serif;
}
/* open sans bold */
@font-face {
font-weight: 600;
font-style: normal;
font-family: 'Open Sans', sans-serif;
}
strong {
font-weight: 600;
}
/* accordion title text styles */
.accordion-container p {
color: #014237;
font-size: 45px !important;
font-family: 'custom_64056', 'VT323', sans-serif;
}
/* accordion content text styles */
.accordion-content p {
margin: 12px 0;
color: #014237;
font-size: 20px !important;
font-family: 'Open Sans', sans-serif;
line-height: 35px;
}
/* mobile sizes */
@media (max-width:640px) {
/* accordion title text styles */
.accordion-container p {
font-size: 25px !important;
}
/* accordion content text styles */
.accordion-content p {
margin: 12px 0;
font-size: 10px !important;
line-height: 20px !important;
padding: 10px;
}
}
/* accordion title styles */
.accordion-container .accordion {
margin: 0;
padding: 15px 8px;
color: #014237;
font-weight: 300;
cursor: pointer;
transition: color 0.4s ease-out;
}
/* hover styles */
.accordion-container .accordion:hover {
color: #EA7194;
}
/* accordion icon box styles */
.accordion-container .accordion::after {
float: right;
content: '✕';
font-size: 20px;
transition: .5s ease-out;
transform: rotate(-45deg);
}
/* accordion icon box styles: opened */
.accordion-container .active::after {
transform: rotate(0deg);
}
/* accordion content box styles: default */
.accordion-container .accordion-content {
overflow: hidden;
padding: 0px 8px;
max-height: 0;
border-bottom: 1px solid #014237;
background-color: #F1EBE0;
transition: max-height 0.5s ease-out;
}
.indent {
padding-left: 20px;
}
</style>
<!-- JAVASCRIPT FOR ACCORDION FUNCTIONALITY -->
<script>
const accordionHeading = document.querySelectorAll(".accordion");
const accordionContent = document.querySelectorAll(".accordion-content");
for (let i = 0; i < accordionHeading.length; i++) {
accordionHeading[i].onclick = function() {
if (this.nextElementSibling.style.maxHeight) {
hideContent();
} else {
showContent(this);
}
};
}
function showContent(elem) {
hideContent();
elem.classList.add("active");
elem.nextElementSibling.style.maxHeight =
elem.nextElementSibling.scrollHeight + "px";
}
function hideContent() {
for (let i = 0; i < accordionContent.length; i++) {
accordionContent[i].style.maxHeight = null;
accordionHeading[i].classList.remove("active");
}
}
</script>
Hi, thanks you! This is exactly what was missing in readymag functionality.
I was wondering if there is a way how I could use link function in acordion menu to jump down the same page (I would like to use it as a table of content in a report)? Million thanks
hey, I think the margin: 12px 0; is the value you are looking for.
.accordion-content p {
margin: 12px 0;
color: #014237;
font-size: 20px !important;
font-family: 'Open Sans', sans-serif;
line-height: 35px;
}
Hi. I have applied the code, but when in edit mode the text style is displayed correctly, but in preview mode it becomes less bold.
I would be grateful for your advice.
Hey, does anyone know how to change the color for the lines/dividers?