Skip to content
  • There are no suggestions because the search field is empty.

Accordion

Display collapsible content sections for FAQs, product details, or grouped information in a clean, user-friendly format.

 


 
VIDEO TRANSCRIPT:

All right, let's take a look at the accordion
module.
So the accordion module is
both available on, uh, Scaffold
Light and Scaffold Pro.
It's a pretty straightforward module.
You see it on most
themes and templates
and, uh, it's pretty straightforward. So it's, it's
exactly the same on both, uh, packages,
whether you're on Scaffold Light or Scaffold Pro.
The only difference would be on Scaffold Pro,
you have access to,
uh, light and dark mode and page animations.
But, um, that's more of like a
theme-wide thing than
just the individual module.
But here it's pretty straightforward. So you see here,
um, accordions are used most of the time for FAQ.
So you see here you have your question,
then you have your answer, and if I click this one,
it expands to the answer. If I click this one,
it expands to the answer, so on and so forth.
One thing to note
is that see how it's kind of snappy when I clip
on-- click on these for the expansion?
That's just in the HubSpot page editor. When
you click on these in an actual
loaded webpage that,
you know, your average--
whoever you send your website to or goes to your website
will see, it's, uh, there's like
a smooth animation. It's less snappy. A
lot of these things, when they're in the page--
Hu-HubSpot page editor,
just to make it more efficient, they,
you know, get rid of some of that,
uh, extra fluff and stuff, so it's easier
when you're editing it.
Anyway, you could see here
that you have your, your questions and your
answers. So here you could see
Q&A item
and, uh,
you could see here, map it out. What is Scaffold? What is
Scaffold? Who is Scaffold for? Who is Scaffold
for? Is Scaffold compatible?
So on and so forth. So you could see how the questions
here line up with the questions here,
and then you can, you know, you can rearrange them,
you can add them.
One thing to know is whatever is on the top
is usually what's gonna load,
uh, or what's always gonna load expanded
on, uh, page load.
But, uh, let's go into one of these so we can edit it.
So you have your question up here, what is Scaffold,
and then you have your answers.
So to edit these answers,
you'll see in, in, um,
throughout the theme that I use just regular
text, uh,
fields as much as possible. I'm not a fan of
rich text areas. You can access
them in HubSpot or, sorry,
Scaffold Pro,
but, uh,
I, I don't wanna get into the whole laundry list of
reasons why I'm not a fan of rich text areas. They
make it difficult for you to
maintain style and consistency across
your website, basically.
So I opted to use
more just regular text fields. So you can see here,
this is the text that's here,
but, you know,
m-my m-- my biggest concern was what if you had,
uh, some text that you wanted to highlight or
you wanted to link or anything like that in
your text field?
So this is a solution I came up with.
Right here you have highlighted text or link.
I can select highlighted text,
and then you could see here in this example, we
copy... You have to
copy and paste it
letter for letter. It needs to be exact,
but you copy this and paste it here, and now
we have the option to make it bold.
I can make it italic if I want. I could do
one or both.
Um, and then there's that. And then you see
on this other line here, so if you wanna create a
new line,
you just create another text area. So let me
actually go back here,
and you'll see we have two here. So if I add
one more, you see that gets added right
there. There's a new line.
So, uh, let me go back here,
and you can see your breadcrumbs up here is how you
kinda navigate where you are.
So let me go back here.
Let me delete this one I added,
and let me go here. And this is a good example of how we
use the link. So we copied this
Click Here.
We said we wanted a link. We pasted it there,
and then we set the link here. Now, there's no link
currently. This is just for the example,
but if you wanted to add a link, that's how you would do it.
So that's it. It's pretty straightforward.
It's a pretty simple module,
but like anything else, I think the best way
for you to learn
is to just go in there
and mess around with it and start experimenting
with it yourself.