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!