hi and welcome to another training video
from XM pro today we will be looking at
how to use the accordion component as
its prerequisite I recommend looking
through the video on how to create data
sources before watching this one
the accordion can be found in the layout
section of the blocks an accordion is a
group of accordion items that can be
expanded and collapsed to add more
accordion items click on one accordion
item and press the plus button in the
toolbar or click on the accordion itself
and there's also a plus accordion items
can be renamed and they can have I can
icon is applied to them you can select
from a library there are many icons in
here or you can select from a URL or you
can upload an icon you can also disable
specific accordion items on the
accordion itself you can either you can
get there by clicking on an accordion
item and then pressing the up arrow in
the toolbar or by going into the page
layers and selecting the accordion in
its properties we have a tooltip
visibility which is self-explanatory and
then we have allow expanding multiple
which if unchecked allows you to only
expand one accordion item and if checked
it allows you to expand multiple items
collapsible which allows you to collapse
all the accordion items if checked and
then disabled for the entire accordion
selected index is the index of the
accordion item to be selected by default
so
would be the first accordion item one
would be the second accordion item and
so on and you can add any other
component inside the accordion items so
for instance I can add a field set to
the first accordion item I can add a
circular gauge to the second accordion
item and a color selector to the third
accordion item and then if we save this
and launch it by default we have the
second accordion item selected with the
circular gauge inside of it and because
the accordion has a collapsible checked
we can collapse all the items and we can
also open more than one so this is the
field set that we've added to the first
one and the third one has a different
name and an icon so if I add another
accordion to the page
and then select the accordion itself so
I clicked an accordion item and press
the up arrow to select the accordion and
then go into block properties and data
source and I've created that a data
source previously for this so we select
the data source and then if I click on
the Audion item and go into appearance I
can make the title the name of the
person for each row and then if I want I
can add a field inside the accordion
item or something like that and then I
can change this to dynamic value and
select the ID note that if you do this
the you can't add anymore
accordion items in here and any
accordion items that you have had in
there will be made invisible and you
won't be able to access them until you
turn the data source off again so what
this is going to do is it's going to
create accordion items per data item so
we've got Bob Rachel and etcetera and
then each of these is going to have the
ID put in the field at the label of the
field set this is how you attach a data
source to an accordion this has been how
to use the accordion component
