you click on the the leftmost column which here is a number okay um it opens
basically like kind of like an accordion right but if you click anywhere else um
it's going to open up a link to a different page okay so kind of two different
actions here and um yeah we really use an accordion because
accordion um basically this entire bar here is a link right and uh so yeah
that's a tough one so how can we get around that another thing so first we're going to
build this kind of statically and we're going to we're going to see how what Stacks we could do um and then we're
going to try to get it working in blog or feeds right so that we can uh have
multiple choic and because sometimes building something statically is cool and then when you try
to make it work inside feeds or blog you hit some roadblocks so um we're
going to try to graduate and do both today okay all right
so um we're going to open up Stacks classic here okay good old Stacks
classic and uh we're going to do a brand spanking new project okay open stack
page someone's saying that my screen flickering again uh I literally some weeks it happens
some weeks it doesn't I haven't changed a damn thing about my setup um so I
don't know one day I will I will attempt to uh to replicate it and figure it out
I tried to go back and watch the recordings of the live streams and they're good so I don't know don't know
what it is um so if you're getting the flashy thing sorry
um okay so let's go ahead and start this page we're going to do site Styles we're
just going to Chuck it up there I like to just throw on Chuck here we'll do uh
make it minimalistic site style so we can add some stuff into it maybe okay um let's just quickly build in
we're going to do in this
and to uh two column layout right and I'm just going to build this kind of
very statically okay um first off there's two things that I have ideas
that we can do okay um first off actually I'm curious like so accordion is obviously what we want right is there
anything we can do in accordion so let's let's just quickly build this out with accordion now I'm not going to try to mimic that exact layout with the images
and the exact text or whatnot we're just going of do going to wing it okay we're
going to wing it as we normally do makes it a little bit faster to wing it a little bit sometimes all right so we got
an accordion right and it just as content let's just add some text in there okay where's my
pink ones there it is right um so here we have an accordion
right um accordion drops down and that entire
doohickey technical term there that entire thing is a big old
button but can we make it link out curious just just for fun right I'm
going to go ahead and um put in I'm going to type in some HTML into here
right just for fun just to see how what happens okay um
all right we're just going to link to video Pro
um I have no clue if that's going to work all right let's see um preview that
oh no oh it's because this is a link unto itself I
believe and yes and you can't have links inside links so I that doesn't work
that's too bad right that's question is answered so accordion
is definitely out we can't have a link inside of a link it ain't going to happen
okay oh when I'm not facing it you guys don't hear here let me see if I can change the direction of a mic so it's
always in front of me sometimes I kind of have it off to the side okay so here hopefully that's better uh kind of makes
it so I can't see my screen too good sometimes but okay um hopefully that
will fix the directional mic issues um right so we're going to build
in a two column layout okay and um over here we're just
going to go ahead and add in a
um we're going to add a button you need a button do I have
a no all right we're going to do a button and um and we're going to do like the number one in there okay and uh
let's let's at least make it a little circle like he had in his layout that could be we we'll do some some stuff
here so okay uh we're going to add a class here let's just make it like uh
round uh Circle button Circle dash button okay uh so I
got a circle button class we're going to go ahead and add border radius
all right uh we're going to add NOP my border rate you know I need to I I think I'm going to rename this rounding Swatch
probably in at least maybe not now but in the next version because technically it's not rounding it's called border
radius right and it is one of the few things that I don't call it exactly what
it is um in real in real life right so it kind of drives me nuts that I call it
rounding but okay um so we're going to do Circle uh we're going to do uh
percentage uh 50% okay so um that makes it that makes
it sort of round but it makes this it makes it oblong if you notice it's not perfect right and that's because it's
not a perfect square in order to make a perfect circle you need to start with a perfect square okay so um what we need
to do is we just going to use aspect ratio uh we're going to do voila and
we're going to make it 1 by one which is a square okay and that
[Music] should doesn't look like a square here but it should that should do it let's
let's have a look that's a perfect square score okay sweet I should okay perfect square
now um we're going to do is in this two column I'm going to make um we want the First Column to basically shrink to
content because I just want that First Column to be just the button and that's it
okay um so let's go ahead and uh we're going to go shrink to content on column
one and always shrink to content even on M okay and then over here um this is
where we're going to add in our oh column two is going to be Auto so column two is going to be Auto um and that's
just going to eat up the rest of the uh the space okay and let's add a little bit of gutters because it's always fun
to have gutters okay um that's a lot of gutter but that's okay uh maybe we don't
need so much um gutter there there just ver just horizontal Gutter and padding
um and then we're going to add in um I'm just going to add in a header into here okay and uh uh we'll be born we'll say
this is um this is my header sure whatever okay um let's preview that
voila so that's quite a bit of of padding let's just go ahead and reduce that a little bit all right a little bit
closer there we go right so basically I need to replicate this okay and I want
this to open up something below and I need this to be a link to something outside right right so we'll start off
the easy part is the link right this is just a link so we're going to add a link to here and
um all right so this has a link okay and uh actually let's let's go ahead and
another thing I'm going to do is uh we're going to add in
a just to kind of um make this so what do we want to do
let's go ahead and I'm going to add some padding onto this just to just to bring it down the page a little bit I'm just going to do
py 48 okay just bring it down and then um in here we're going to
have ah let's let's not worry about styling right now uh but we want some okay um all right let's just do I'm
going to multiple of these right let's do quite a few I'm just going to copy paste okay there we go now let's add
some different uh some differentation to them or however the hell you want to say that right another thing want to do is
uh let's do actually you know what could be fun
is um I'm going to go ahead and do column
two no I don't want it to be shrink content n that would be stupid never mind never mind that okay um but let's
add a little bit of color to this so we're going to do uh BG
secondary okay uh that look okay it's okay all right um here let's go ahead
and uh if you notice in here like it's kind of funky it's got some it's not really like centered so what we want to
do is uh we want to add in uh or we want to remove the bottom border bottom
margins so we're going to remove the bottom margin on that and remove the bottom margin on that okay and voila
okay so we're getting we're getting close okay here um I if you noticed the um this text is not perfectly Center
aligned with that button okay so what we want to do is we're going to go into vertical alignment set that to Middle
okay and voila now that text is vertically aligned with uh the button
right now obviously this is very small so what we can do is um uh we can add a little bit of
padding there we go sweet I like that so I have a little bit of padding all the way around this text is perfectly
aligned with his button um if we preview this in the browser um this should link
to a web page perfect that's the easy part right okay um now let's go ahead
and we're going to uh when we click this button it should do something okay so um
I'm going to go ahead and add in let's add in a container here and um I'm just going to add some
text okay um and let's make the
container um right let's go ahead and do uh BG secondary on that as well right
and we're just going to add some text into it okay oops and let's see see they're not
lining up that's because over here uh I just want this to be
sizing I don't want any gutter so you could either do sight width full width or Auto no wrapper I'm just going to do
auto no wrapper on that bad boy and that didn't do what I wanted it
to do what happened
that's odd why is
that
what oh it's because I should I should be using a one column on that okay instead yeah instead of a container I
can use a one column that way that we have the same like same gutter logic going on okay one column that should oh
wait but we need to add BG
secondary what what's going on
here there we go okay so now we're all matched up probably an easier way to do that would be to be oops to be honest
would be what you do is if you instead of trying to line up background colors what you do is you put both of these
inside of a container that then has um a background right so basically then
that's better I was trying to not have to put an extra stack on the page but it
is the better way to do it so now now they're both BG secondary right
now they're it's going to be perfectly lined up all the time because they're all because these fill up the same exact
thing okay um but what I want to do is I now want to uh show and hide this one
column when I click on this number one okay so how are we going to do
that first off we're going to use um we're going to try to stay inside
Foundation 6 we're going to use a Toggler okay um so let's do
um I'm just going to call this show hide okay um I think that makes sense right
so when I click on this button I need to um add or remove this basically the show
hiide class or yeah okay
um right let's do that so let's go ahead in I think it's in components we're
going to put a where is it here where is
it Toggler
okay wonder if you could do animate click as well
H you could animate no no this animates
this thing you click that's not what we want all right we want to use Toggler um now I know Toggler sometimes
can be confusing to some people okay um so let's Analyze This
okay um so we we have multiple things
okay this particular um there's three different classes that
we need to be aware of okay the first is this is going to be uh what we want to
add or remove a class on okay so that's actually um let's let's call this a show
hiide um container or content okay all right so um this is
going to be show hiide content this is going to be a
show hide trigger okay just so we know so we have
this oops did I shoot I deleted my my other class by accident I need that to
be Circle dash button all right so this one is the show hide trigger this is the
show hide content so those are two specific things that we need okay so up
here we're going to do show hi High content okay and then um we we we're
going to skip this toggle class for right now and then this is the um trigger class say so this is going to be
show hide trigger this is what what we're going to use to trigger the
toggle okay and we want to trigger it on click
okay so basically what this do is going to say is um let's actually preview this and whenever I click this button okay it
should toggle on and off oops um this toggle class on this trigger on this col
one column because it's the show hide content does that make sense okay so
when we click on this trigger it's going to take this class and if it's there
it's going to remove it and if it's if it's not there it's going to add it to this okay just to so we can see that in
action we're going to preview this in the browser okay and uh this is really
big let's go ahead and make this a little smaller
but come on there we go and we're going to open up the inspector I'm going to click on this number one right now I I
haven't added any animations yet I just want to show you what this is doing let's find um in the code
here make a little bit bigger for you to see uh let's find that show hide here
okay show hide content okay now if you notice it has the toggle classes because I clicked that button okay I'm going to
go ahead and click this again if you notice that class is removed so I click on the trigger that class that toggle
class is there and then when I click on it again it's removed just adding and removing the
class that's all that that swatch does okay seems simple Le but super
powerful okay so um what we want to do is uh I
want to toggle the show hiide class okay so we're going to we're going to do a
toggle show hi High okay um so now what we're gon to do is we're going to add
and remove styles from um from the content okay so um if
something has the show hide class and actually what I want to do is um we
going to go ahead and add in a for fun just for now I'm going to do
something simple I'm just going to do um a display Swatch and um if something has show hide okay I want to hide it okay so
uh we're going to go ahead and do um display
none okay so let's go ahead and preview that so now when I click on this
it hides it when I click on it again it shows it pretty
simple that's it okay um but we can go better right I
mean we want to get a little fancy now that this this makes a very basic thing work very easily okay but now let's take
it up a notch and we want to uh when we click on this button we want that to
like grow right we want to just kind of like an accordion would do okay okay
so um unfortunately um we need to ditch this display Swatch to do that okay we
need we we need to go a little bit more in depth okay um
and something that probably isn't apparent but the display attribute
basically hiding and showing something isn't animatable if that's a word okay you
cannot animate that with with CSS okay or with you can't animate that at
all okay um either shows or hides that's it boom boom that's it um so we need to
do something different in order to animate this and if we want it to like grow and hide what are we changing right
well we're changing the height okay
so um what we can do is
we can make uh what I'm going to do is I'm gonna add in by default I want this to
be hidden okay so what I'm going to do here is uh I'm going to on show hiide
content I'm going to go and add in a height Swatch because we want this to grow and Shrink okay
and uh we going to do is we're going to go ahead and by default on the page now
this is something that that probably isn't apparent okay now we could go ahead and and um actually let's do this
first I'm going to make this a height of zero okay so show height content has a
height of Zero by default so you see on the page it's zero we can't see it
effectively the same thing as display none has a height of zero okay and um
what we're going to do then is we're going to add in another Swatch okay and
what we're going to do is um if it's show hide content or if it's just show uh yeah show
hide right um I probably should have picked a different class than that um
let's I'm going to change this I'm G to I'm going to set this to be open okay
um actually here let's just do sh- open so that I you know maybe open is used
somewhere else so let's make it kind of specific so we're going to do sh open now okay um and if on so show high con
we want this to be height zero and if it has an sh open
class okay that has an sh open class uh we want that height to be something
different now the the problem is here um we can do height Auto right which which
means uh cuz maybe we don't know the height of that content right so we could set it to be like a height of 256 but
what happens if um if we don't know what that is so let's make sure that that works okay so now but if you look here
there's there's some empty space here it's because we've made this a static content area right I mean it's static
height so if I were to have let's say two text content areas in here okay now if I click on that look it gets cut off
right so that doesn't make sense okay so um what can we do okay again as I said
let's try height Auto okay um and let's go like this hey
that's not bad but this isn't animating yet okay um so how can we animate
this um so what we can do is uh to animate things a simple way if you've
probably known is something called a transition okay and uh
transition where is there it is down here okay um and we're going to put a transition on show hiide
content and the reason we want it on show hiide content is and not sh open is because the sh open class isn't always
there okay um so show hiide content is always going to be there okay so we're
going to do that um and you can specify specific property or you can just use the default of all okay and um yeah so
now we're just gonna uh we're gonna this is going to animate all properties over one second let's uh preview
that wait that didn't work Joe now I knew this wasn't going to work okay um
and again this is just an experience thing as well okay um is that you
cannot um animate something to a height of Auto you can only animate it to a
specific height so let's change this back to 256 okay just to show you I go and click on that
oo okay but it's still cutting off the content what the heck man okay um so we
need to we're close we're getting there okay but we need to go a little bit
farther okay so um essentially what we're going to use we're we are not
going to use height right so I'm I'm not gonna I'm not going to use height at all and what
we're going to do is we're going to use max height okay so by default I want the
maximum height to be zero pixels okay then when it's open okay I
want to set the maximum height now here you can only go up to 256 again Joe what the heck um let's try actually I haven't
tried this let's try fit content that's interesting um I don't know if that's
animatable right so so let's do that I go ahead and do this nope that's not animatable Joe darn okay um so what
we're going to do is we're going to go to detailed okay and I'm going to set um
uh Max unit pixels to be a th000 okay um and essentially what this
is doing is we're setting now this content is not a th000 pixels okay but
what we're doing is we're animating the max height attribute um and the maximum
will be a th000 so if our content is 500 pixels it will still work properly if
it's now if it's over 1,000 pixels it'll it'll it's going to limit it to be a th000 pixels so you might need to make
this bigger if you have a lot of content okay um but let's make sure let's see if this works
voila there we go now I do recommend that you make this value as small as
possible okay so try to figure out um and the reason is okay so we have this
currently animating at 1 second okay um and let let's do this I'm
going to go ahead uh let's look at this animation actually let's exaggerate a little bit I'm going to put in I'm going to make it bigger okay
so you see that animation it animated all the way down and all the way up now
take not note of the timing of that okay now it does take a second to do
that now I'm not sure exactly how large this is uh let's just get an
idea that is approximately 800 pixels
okay um close to a th000 um but let's go ahead and I'm
going to delete I'm going to delete three of those okay now let's check out the
animation it looks a lot faster right and if you
if you look here when I click on it close it it it looks odd okay it's not
that it's not the exact same as when we had a lot of content and the reason is is that timing
is animating um as if it were going to do um even though this is only probably
200 and some odd pixels right yep 212 pixels the animation timing is based on
a, pixels because that's what we set our Max height to be okay um
so now there's no changing that right and this is little hack that means it does mean that large content and small
content could have some very diff some slightly different animation speeds okay
um but if your content is relatively similar no one's going to really notice okay um and it's really only more
noticeable when you have slower speeds like a second or something like that normally you would actually animate something like you know 300 milliseconds
or half second right um something like that so um there is a caveat to that but
it does work okay so let's go ahead and um if I were to um here let's and what
I'm going to do here is I'm going to rep uh yeah so let's do that and then
we're going to go to height and let's set that to be more like I don't know 800 pixels okay something like that so again you're going to want to set this
to be something that you know all of your content is going to fit within but you know you want to make sure it
doesn't get cut off but you want it as small as possible
okay oh and I didn't I clicked on the wrong thing hold on one second I click
on the number voila pretty slick
right um okay now let's look at a different way of doing this um I I'm I'm
actually going to go ahead and add it uh actually we're going to let's delete that I'm going to duplicate this
page uh let's do this is uh toggle right
we're going to duplicate this and now we're going to use
peekaboo okay all right so now we're going to use peekaboo and um so in order to do that
we don't need any of these bad boys here don't need any of that all right uh we'll keep those two
swatches because that's that's pretty much our button okay um so what we're going to do now is we're going to add in
peekaboo uh we're going to add a peekaboo stack okay um and just to make things simple
I'm going to use this peekaboo launcher okay you could just add a attribute to a button I think it's PAB launcher okay um
but yeah we're just going to do that and uh what I'm going to do now is
we're going to just whoops that was weird what the heck there we go we're
going to move that one column into the peekaboo okay so let's look at these settings
here uh so this peekaboo uh you give it a launch ID we just leave it as peekaboo for right now okay and this launcher is
going to on click we're going to toggle uh pekabo on and
off okay um so and then let's
see let's look that I think that's it voila and we're
done okay now if you notice here peekaboo does cut this content off because it does have a maximum size um
attribute and here you can do small medium and large okay we had set to 500 right and you can adjust those okay um
so essentially peekaboo is doing something similar to what t is doing
okay peekaboo actually does a lot more um it has a lot more kind of state and various things and you don't need to
know all the various um swatches that I added right um you just kind of throw peekaboo on the page and he saw how easy
that was okay um so there we go
peekaboo now um we want this we don't want just one
instance of this on the page we want multiple right so let's go back to toggle okay and let's go ahead and uh
we're going to copy and paste this okay now now I have two let's go ahead
and change this one to be um two
oops so if I go into here now now I have one and two now what if I if I click on
this oh no it opened both of them if I click on this one oh no it opens both of
them right so in order to do this essentially we
would need to duplicate the Toggler okay so that it it had special
instances for each one Toggler is really kind of a um let's see uh there is okay
hold on one second but there is a toggle only trigger children oh shoot when set only elements
found within the trigger element will be toggled oh okay
yeah that this isn't a child of the trigger so darn
it um yeah so in order for this to work with toggle okay you would need to you
would need to duplicate all of these swatches again okay um in order for it
to work um individually with this guy all right now you some things like
this show hey uh content could work right and you can also keep this one so here let's do it right so um over here
down here we're going to do a different trigger so we're going to do uh show hide trigger two okay I'm just going to
add a two at the end to keep things simple and um we have show hide content
to actually we're going to do show hide content and show hide content too and
I'll I'll show you why uh no actually we can't do that unless we uh yeah we're
going to do show hide content too that gets kind of crazy to explain if we try to do
both all right so there we go we have two classes right and essentially now we're
going to we're going to duplicate this now to make things simpler actually what we're going to do is we're going to add in a pen okay and I'm going to go ahead
and uh we're going to Chuck all these in here
and we're going to call this um toggle one okay and then guess what I can do I
can just go copy and paste and this is going to be toggle
2 okay and in here we're going to go to each one and we're going to um Target
the content two okay and in here we're going to Target the content to uh we can
leave sh open actually um and then we're going to toggle uh that essentially uh
basically this 's open actually is going to be a a unique one or just kind of outside it doesn't need to be made
specific for each one okay um and then height here we're going to do content
two all right you could potentially factor out the transition and the height
swatches by like extracting and using a different class to manage that versus
the the toggle but just to keep it simple um for for this example um we're going to duplicate these three swatches
so this should work let's go ahead and check so now I click on that does that clicks on that does that
nice sweet okay um so that is toggle using multiple
oops uh actually here let's save this so I so you guys can I'll get this
um let's just call this toggle
layout okay man I just noticed that it's 12:15 already and we want to do this with peekaboo okay um replicating this
with P or we want to do this with feeds after um okay we're going to replicate this now with peekaboo okay so I'm just
going to uh copy and paste this uh just to keep things simple okay
and um all right let's make this one peekaboo
2 all right again just by keeping everything the same um we're duplicating
it right so we're going to have to make them unique for each instance okay and that's that's pretty simple with
peekaboo so we're just going to do um uh we're going to do launchers peekaboo 2
right and down here we're going to make peekaboo 2 with launcher ID here as well
okay now um what we can do is um we can close others with
class okay um and what I'm going to do here is I'm going to close peekaboo
one uh well let's do uh actually we're going to do what was it show hide
content okay so in here I want to close everything else that has oh but the
um on this peekaboo instance I want to do a show hide and we're just going to
do show hide and I want to close everything else with show hide so we're
going to do here is peekaboo we're going to close other class close other class show
hide all right so there we go and that gives us the ability to O How come that
didn't when I clicked on that it closed that one but when I clicked on that one it didn't close let's see if we can fix
that all right sorry if you hear the dogs barking um Gardener is here I tried
to ask him not to come until 1 o' but he came early today unfortunately okay um let's go back into
here so we had uh see this peekaboo closes with others
with class show hide and this Clos others with class uh
show hide let's see uh leave closed class
empty oh I forgot to do that there we go I
forgot to put the show hide class on this peekaboo all right so now if if we do
this voila now they're individual right but these if I click on
this header then that links to the actual page okay so that's cool we show and
hide classes um for
peekaboo sweet okay now let's go ahead and see
what we can do with feeds okay now I I'll be honest um I to speed things
up I I was I was going to try to take this example and plop it into feeds and
then take you know peekaboo and plop it into the feeds I'll tell you right now it's not going to work okay that would have been cool to
just show you hey look we trying this and it fails I'm just going to tell you right now it's G to fail okay um and the
reason is is peekaboo um as you probably are aware if you use something like total CMS blog or total Loop or um
feeds the content is only editable um inside the HTML on the actual web page
but with Toggler and with peekaboo a lot of this data exists in the JavaScript
okay and feeds and total CMS don't have access to that so what can we
do we're going to have to take a completely different approach a very
interesting interesting approach um and it will be fun to actually build this this is probably going to take a little
while okay um because I'm probably going to take it slow to teach you guys and show you guys everything that's going on
okay um so if you have to leave I understand because we're almost approaching an hour already okay um
hopefully you've already got a lot out of what I've shown um but we're taking it to the next level right now okay
um okay and uh so we're going to duplicate this and
um this is going to use something called radios okay um not a typical use of what
you think a radio is used for okay um but let's go and get her done or try to
get her done um all right first
off we're going to go ahead and let's look at Radio
oh over here right what is a radio first right let's just add a couple radios to
the um and what we're going to do is we're going to make sure they're all the same name okay so field name radio I'm just going to go ahead and add a couple
okay um and uh let's preview right so we have radios and if you look a radio only
allows um you to have one selected if it has the same field thing
perfect okay um so what we're going to do is we're going to hijack that okay
because something that I know that you might not know is you can Target something with a radio Okay um you can
Target a radio if it's checked versus
unchecked okay um so the idea here is if we're going to hide a radio in
these buttons and when I click on it it's going to make it
checked when it's checked it's going to open up this box when it's unchecked AKA
when I click on o but a radio can't be
unchecked I see I didn't didn't build this before so a radio can't be unchecked so that is a
drawback okay um but guess what can be unchecked a
checkbox okay um so um for right now I'm
going to build this I'm actually going to move I'm going to change we're going to move we're going to build this with a checkbox with a radio though um if we
used radios it'll be the same exact implementation as if I did a checkbox but but with a A checkbox you can have
multiple open with the radio you can't with a checkbox you can have things all
of it closed but a radio you can't okay may
maybe maybe we can quickly um do it with we'll continue with radio and then I think it'll be pretty simple to
replicate it with checkbox um in a little bit you can kind of see the the difference in
Behavior okay um okay so what I'm going to do here is uh
oh wait I need to I I need to remove peekaboo launcher and remove this from uh remove
peekaboo from there because we're not using peekaboo okay
um okay so let's just work
on actually you know I am going to use checkbox for right now and and then then we'll do radio okay we're going to use
checkbox and I'm going to give this a class of
um give this a class and just call it
um Toggler toggle check or toggle Trigger or not because
it's going to it's it's supposed to be the trigger okay so let's go in here and in here basically you can see I I can H
I have a check box and I can check it and uncheck it cool okay and just for fun I'm
actually going to delete the label right and we're not going to have any value right we're not using this
checkbox as part of a form okay um it is purely
oops it is purely to be a
checkbox okay I like
it um now now what we need to do is when I
check this check box um we're going to um use the similar height attributes
actually let's go ahead and um copy those we want uh transition I don't want Toggler I want height and I want height
I want these so we don't have to redo those right so um so I want the transition on
show hiide content which is this okay um and then I want the height to be the max
height to be zero and when we add sh open it's going to be a Max height of
800 now um we're going to have to change this particular Swatch because we C we can no longer um guarant basically base
our Logic on um this being open okay or this class
being there because uh we need to base it off this checkbox being checked or not okay now um I actually let's it's
the same Swatch but we're going to have to go pretty Advanced here okay this is definitely Advanced super cool this is
Advanced okay um I'm going to give I'm going to give
first off we need to give uh the the container that's holding all of this a class
okay um so we're just going to do um we're going to call this item container
okay okay just just because this is an item okay um or no here let's call it
toggle container okay toggle container okay so this is toggle
container okay um I may need to add uh I'm going to open up vs code really quick just to just to show you this
[Music] um what I'm doing here again this is going to be overhead
of a lot of you uh I I know but this is we need to Target some stuff with CSS
okay um so first off we need to we need to base something on toggle container I'll make this as big as
possible okay um so I want toggle
container and remember um inside of this I gave the checkbox the toggle
trigger okay um and if you know CSS we can do something like this oops okay I
can do um toggle container if it has a toggle trigger inside of it now what I need to do is I need to Target um
actually what I need to do is I need to Target this show hide content okay so um we're going to do
this show hide content and um we're going to do Max
height just to have something in here to show you um max height um 800 pixels
okay and let's go ahead and get CSS in here
right now um
this we want to we only want to trigger this logic when in between here is that
checkbox is checked um this is this is
sort of bleeding edge CSS I actually use it in some in Stacks now um because it is supported by like
93% I think of um browsers out there that's something called has okay
swatches do not support has yet um in sort of something maybe the next version of foundation uh we can build this in
okay but so if toggle container has um toggle
trigger that is checked okay let's analyze
this so if toggle container has um a toggle trigger that is checked
apply these styles to show hide
content prior to a year ago you had to write multiple lines of JavaScript to
accomplish this okay this is my favorite feature in CSS of the past 10
years okay is this has this is a mazee balls like okay so how how can we use
this in our Swatch I'm going to take just the selector part of this okay and
we're going to put that inside of this Swatch because in here um in the CSS of
a Swatch you can type in whatever you want okay so whatever CS Advanced CSS
selector you need to do there we go so we're going to use that and that we have our fancy has uh selector in there and
essentially now when I check this box okay um the height of this should
change and I haven't done this so but it should work so it's hidden by default so
that's good and when to check this voila oh my God how cool is
that hey everyone still in the chat man how is this come on give me some feedback here that is freaking cool
guess what zero JavaScript for this at all this is 100% CSS this is chef's kiss
this is amazing okay again this is this wasn't possible a year
ago uh pretty cool
okay um but next up is we have this checkbox but that looks ugly right what
can we do okay this is ugly so um what we can do is I'm just
going to position this effectively over the button and then make it transparent
that's it okay so um let's go ahead and on toggle trigger
um we're going to go ahead and do uh a pos position Swatch okay and uh we're going to do it
on toggle trigger and uh we're going to do relative to
parent uh and actually to make it relative to parent to make sure it's over this button what I'm going to do is
I'm going to Chuck in a container in here okay and we're going to make it um
position relative and we want to do auto no wrapper so I'm going to move both of those into this there right and position
this is uh we want to position it percentage wise we want to do it top
50% okay left 50% uh and then we want to Center the
origins um make it a z index of I don't let's give it like uh two okay just so
it's it's above all right and let's preview that
all right so now I have
interesting okay it's not really Center on the button though okay
um and actually to be honest this doesn't need to be a button anymore um it could just be um anything okay but uh
let's tweak that position Swatch a little bit see
if I did top
zero so that goes there how come top 50% goes down there interesting let's
preview this
spe the margin no
hold on let's look at oh let's turn off inline check boxes that could be affecting
it okay uh transition y
all right I'm curious here let's see let's inspect this
again and we're going to do can I make this
bigger oops
oops H nice okay still unsure why it well
actually if we do width and height 100% we could just do top zero okay cool I like this okay um so on here I'm just
going to do um utility classes I'm just going to do uh W full and H
full okay I think that's good and then on our position Swatch I'm just going to
make it Z 0 all
right oh maybe I got those classs oh no it works in oh
interesting it works in an
arc but not in what happens if we preview in
Safari all right well it works in soar you just it the visually if you see I can click anywhere on this button and
that check boox is working in Safari right is it the same in preview yes all right so now our
checkbox is there now we don't want to see it okay and that's super simple okay
what we're going to do is we're going to do a um opacity
Swatch and we're going to make um toggle trigger have an opacity of
zero boom check that
out how amazing is that
okay um now if you notice a minor thing is if you hover over this we don't get
the pointer anymore um so we could just use the um cursor
Swatch on oops on toggle trigger and make it um
pointer right you can also do fancy stuff if you wanted it to be like
uh not move What would something potentially interesting like help maybe
yeah that that could be interesting right so you can go ahead and preview that and then when you hover over the button you get that look at
that pretty cool I like
it if you notice this is hold on what's going on here something's below this button let's see inspect
oh I think I just I just because I added padding or whatnot
okay oh this this checkbox still has
display interesting
because I'm doing that
interesting that still doesn't fix that though interesting
H all right well that's a minor thing um I know I've eaten up a lot of your time
because we want to uh we want to replicate this multiple times now but so
uh at this point I can just I can copy and paste this container as many times as I want and all my all my CSS should
work right um I don't need to replicate it or duplicate it or do anything like that right so now um I have this button
let's go ahead and do this now again with the because they're
check boxes they're separated okay now this has extra padding because I think I added padding
to that container that I copied and pasted um but here let's do yeah I did uh I should have should have done done
that
differently there we go
sweet um all right so there we go uh that was checkboxes not
radio um let's do it one more time we're going to duplicate that we're going to do
radio right and let's show you how we can do it with a radio um so essentially here we're going to go into we're just
going to swap out these these um check boxes for radios
and actually all of our code as long as we we uh put in these classes all of our
all of our same code should work um and here I don't want a label I
don't want to Value let's turn off inline although inline inline might not
be an issue anymore let's let's try that I'm going to copy this we're going to paste that in here delete the checkbox
right let's preview this now if I click on this one it should boom it closes that
one right now the thing is here though with radios as I said earlier I can't turn off a radio because one has to be
uh you know clicked at all times and the reason it wasn't on page load is because
um it's theoretically wrong you should always have a radio at least one radio checked okay so like this first one
should be checked by default if you notice when I set that to be checked it's open and when I click on these they
will dynamically um animate individually okay okay so now with this
particular layout um since this is completely separate from all the logic
which is in our swatches we should be able to replicate this with feeds no
problem okay um so really quick feeds or total CMS okay um I'm going to Chuck
feeds on the page just for right now um and we're going to use I we'll use the
radio option okay I'm going to duplicate the radio and um we're going to call
this feeds plus
radio right and um right we shouldn't need to change our Styles at all right
so I'm going to go ahead and do a feeds stack right and we're going to do
here okay um okay so inside feeds uh I'm going to go ahead and add in a CSV feed
okay and um we're going to do um ID comma
um label okay um and I'm just going to add in here one
second let's just do um right we're just going to do this
and we're going to do uh one comma um
Joe two comma Josh three comma um
Jacob um four comma uh Jessica and then five comma ran okay
that's the Workman family if you didn't know okay um we're just going to take this
data going to plop that in okay um and then we're going to take this
container I'm going to plop it there okay and we're going to delete
that one
um all right and then in here in the button label uh we're going to put in the
ID all right and then over here um we're going to put in the what I say I said
label I think it should have been
name all right put label yeah ID and label okay now you're going to have multiple Fields right you're you're
probably going to customize the link and you'll probably customize the content I'm just I'm not going to do that for
right now okay um but that essentially should be it when I when I load this page it we should have five of these and
they should all work independently okay um so as you see
there they all work
independently the stacks ID duplicates not allowing for changes in the
selection I I don't know what you mean
radio and checkbox still has the feeds error um there is no feeds error I as I showing
you you don't need a form there is no form here at all it's just a
radio that's it right but um yeah as you see pretty
cool now with that said um I think peekaboo has some interesting
features to it and I do think I will eventually add feeds support to Peekaboo
so that you can have peekaboo inside of a feed um and then use some of its cool
features because it has definitely some other features that aren't available in what we've done here okay um but this
gets this gets pretty darn close Okay um so yeah there we go guys I think it's
pretty fun um I was kind of a crapshoot I had an I had the idea that I thought this would
work and I was like I'm pretty certain this is going to work it's going to be pretty slick um and I built it you saw
me build it live here just kind of figuring it all out and that's actually an interesting thing too is you know
watching someone figure something out um I will go ahead and post the link to
this project file um in the community for this live stream okay I'll post a
comment with the download okay so you guys can have this uh project file um yeah pretty cool again that that does
have that to get the the radio and checkbox stuff working it needs that pretty Advanced selector right with that
ha stuff which is slick slicker than snot okay um so yeah cool thank you very much
everybody I hope you enjoyed this hope you learned something um and uh yeah got
awesome stuff coming soon um total CMS 2 Beta is out um um working on as I said
in the Weaver bites I'm working on audio Pro think of video Pro but for audio okay um hopefully with ctas and
playlists and all that stuff as well okay imagine integrating that with feeds and having an RSS feed or a podcast feed
displaying your podcast inside audio Pro managing that podcast through total
cms3 one day um yes that would be cool so anyway there we go so hope everyone
enjoyed today uh hopefully see you on Friday at the hangout um yeah have a great rest of
your week guys we uh go out there and make your website