Hey folks,
Having some issues with the accordion menu. It works like a dream on Desktop and now the Tablet (opens as it should), but it won’t open on Phone. It’s visible but just won’t open. Any ideas? It’s driving me bonkers trying to sort it.
Thanks,
Dan
Do you have anything to look at? Hard to tell what’s wrong without seeing the issue
Thanks. I’ve attached a few screenshots of the accordion menu in situ on the tablet, open and closed. And I’ve included the widget code and CSS below. It’s a bastardised version of the widget from here.
I’m a complete rookie when it comes to code (first time), so some of this was through trial and error and a chunk of help from ChatGPT. It works as it should on the Desktop and Tablet, just not Phone (the menu appears as it should but doesn’t open.
The widget code:
Services/Skills
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Software/Tools
Header:
Text
Text
Text
Text
Text
Text
Text
Header:
Text
Text
Text
Text
Header:
Text
Text
Text
Text
Text
Text
Text
Text
Infrastructure/Plant
Backup/Protection
And the CSS:
/* accordion title text styles */
.accordion-container p.accordion {
font-family: ‘ftnk’;
font-weight: 400;
font-size: 18px;
font-style: normal;
line-height: 1.5;
}
/* accordion content text styles */
.accordion-container .accordion-content p {
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* accordion content link styles */
.accordion-container .accordion-content a {
font-family: ‘ftnk’;
font-size: 11px;
font-weight: 400;
font-style: italic;
}
/* accordion title styles */
.accordion-container .accordion {
cursor: pointer;
padding: 15px 8px;
margin: 0;
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* accordion icon box styles */
.accordion-container .accordion::after {
content: ‘✕’;
float: right;
transform: rotate(-45deg);
font-size: 11px;
transition: .2s ease-out;
}
/* accordion icon box styles: opened */
.accordion-container .active::after {
content: “✕”;
transform: rotate(0deg);
font-size: 11px;
}
/* accordion content box styles: default */
.accordion-container .accordion-content {
padding: 0 8px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
border-bottom: 1px solid #999;
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* CSS for two columns */
.accordion-container .accordion-content.one-column p {
column-count: 1;
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* CSS for two columns /
.accordion-container .accordion-content.two-columns p {
column-count: 2;
column-gap: 15px; / Adjust as needed */
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* CSS for two columns /
.accordion-container .accordion-content.two-columns ul {
column-count: 2;
column-gap: 15px; / Adjust as needed */
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* CSS for three columns /
.accordion-container .accordion-content.three-columns p {
column-count: 3;
column-gap: 15px; / Adjust as needed */
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* CSS for four columns /
.accordion-container .accordion-content.four-columns p {
column-count: 4;
column-gap: 15px; / Adjust as needed */
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* CSS for two columns /
.accordion-container .accordion-content.two-columns ul {
column-count: 2;
column-gap: 15px; / Adjust as needed */
}
/* Add bullet points to list items /
.accordion-container .accordion-content.two-columns ul li {
list-style-type: disc;
margin-left: 10px; / Adjust as needed */
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* CSS for one column */
.accordion-container .accordion-content ul {
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* CSS for one column */
.accordion-container .accordion-content p {
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* Add bullet points to list items /
.accordion-container .accordion-content ul li {
list-style-type: disc;
margin-left: 10px; / Adjust as needed */
font-family: ‘ftnk’;
font-weight: 400;
font-size: 11px;
font-style: normal;
line-height: 1.5;
}
/* Remove column styling */
.accordion-container .accordion-content {
column-count: unset;
column-gap: unset;
}
Thanks so much!
