How to add an accordion drop down to Squarespace website
Learn how to code an accordion drop down on your Squarespace website! Also, I apologize for the little cutoffs ... but I am too lazy to re-record ha!
CODE :
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
});
</script>
Transcript
hey guys Austin here with tym it's been
a minute since I've made one of these
videos but today I wanted to walk you
through how to add an accordion drop
down to your Squarespace site by using
the markdown tool so stay tuned
alright guys so let's just jump right
into this I apologize for the bad audio
I am doing this from home today life has
been pretty crazy at check your market
so I'm trying to do all of this all at
once we have officially booked out all
over the rest of 2018 and are now
starting to booked into the latter half
of 2019 later latter half so check your
mark is doing amazing but I still wanted
to provide you guys with these how-to
okay so let's go ahead and visit one of
my client sites this is a company based
out of Albuquerque New Mexico that
builds Overland vehicles that will take
you all the way from Alaska to Patagonia
they have this amazing company but
needed a website to not only show off
their products but entice people to
contact them about building out an
amazing truck like this one so one thing
that we did here on the details page I
guess you would call it was creating
this accordion drop-down and the reason
we did that is because it's a lot of
information especially since they have
multiple builds here for someone to be
scrolling so what I did here was create
this accordion style so that say the
client has a 4runner they only have to
click on the 4runner information in
order to find out what they need instead
of having to look through all the
different builds so let me show you how
you can do this on your own site I
thought we could go ahead and use my
site as an example for this so I was
thinking that we might want to move the
website design process process over to
the social media process not that it's
the same but for the sake of this
example we're going to pretend so here
for social media basically I just say
really simply this is what I can do for
you contact me but instead I want to be
more transparent and tell you how the
entire process where it start to finish
so that you know ahead of time before
you even call me so let's go ahead and
come in here no we don't want to edit
the banner we want to edit this section
we want to come in here and add this
lengthy process so for the sake of this
example I'm gonna paste this here and as
you can see it's just a lot of reading
and a lot of people don't really like to
scroll including myself so an accordion
menu might be our best option so first
things first I'm gonna come over here
and I'm gonna actually drop this code
into the blog post so that you can just
copy and paste it no need to write it
all out but you're gonna insert this
code to allow the accordion to work
within the specific page that you're
working on so for this example it's
going to be on the social media
management page and I'm gonna paste it
into here perfect so as you can see this
to give you a little walkthrough so what
this is telling the page to do is to
accordion at any time that it sees text
in the h3 format with or without a plus
sign so maybe you wanted the drop down
text in an h2 format or an h1 format
whatever the case just make sure to
change these so that it is associated
with what you want it to do so I'm gonna
go ahead and click Save and then I'm
gonna come up here and what I'm gonna do
is duplicate this but in the markdown
platform so it's already copied to my
clipboard so I'm gonna paste
oops
my life come back over here sure we can
save that control see now I'm gonna go
back to my markdown and paste it here so
anytime I see something that I want to
have a drop down I'm gonna change it to
an h3 make sure to close that h3 so that
you have the differentiation again going
all the way through I'm gonna have to
speed this up so you guys don't have to
watch me do all these little each three
movements alright so now that that's
done I'm going to make this one in h2 so
it stands out a little bit more and call
that a day one thing I like to do is
really add some space so you'd have a
differential this great so it looks
pretty good except for the fact that
it's not centered but we can get into
that in a minute
apply and then save so what I'm going to
do here is refresh the page to make sure
that it's everything that I wanted
perfect
we have the drop down happening it's not
how we want it to look so it's all
adjusted to the left-hand side instead
we want it to look just like this so
let's just treat this like a standard
markdown from here on out so you can use
this cheat sheet and then you can also
look up general code as to what you want
it to do so for this instance I want it
all to be centered and come down here
not that you need to close it but I
always do ooh ooh I don't like that I
like it all spaced out okay cool
so from here that's pretty much it I'm
gonna click apply I'm gonna delete the
text that I had copied because I no
longer need it click Save refresh and
now I have this beautiful drop-down menu
that people can kind of click on what
they want to learn more and expand what
is needed one other thing that I would
suggest before I sign off is I always
like to put a little plus sign after the
text and let me explain why so when the
accordion is condensed people might not
know to click so either you could have a
little note down here that says click to
expand and learn more or this plus sign
kind of indicates to them that there's
something more to read so I always like
to put a little plus sign for example
here I have a little plus sign I also
have click on the vehicle to expand the
specs things like that anyways hope this
is helpful comment below if you have any
additional questions I would be more
than happy to help!