# Accordion tutorial?

**URL:** https://forum.pinegrow.com/t/accordion-tutorial/6493
**Category:** Beginners
**Created:** [April 14, 2022, 8:03pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493 "2022-04-14T20:03:44Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 14, 2022, 8:03pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/1 "2022-04-14T20:03:44Z")

</div>

Determined to learn Interactions. I’ve tried when I first got it. Hoped it would be easier now. Not so much. Help please

1. Doing Accordion tutorial from documentation instructions.  
Got stuck after “Go to the Action list and click on Hide at start”. I can’t get back to “Action list and click on Interactions.” Help please.  
 ![Screen Shot 2022-04-14 at 12.55.04 PM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/3c8fc94b07be3af2abd02d0ca298e6004faffacd.png)
2. Moved to a slider from documentation. Do you have a parts of timeline names like tool tips? Some places have tool tips, others not. I’d like to see a visual timeline dissection. Obviously below is duplicating.

```auto
<div class="pgia-controls"><a class="prev pgia-control" href="#" data-scroll-to="prev" data-pg-ia='{"l":[{"name":"ScrollTo","trg":"click","a":{"l":[{"t":"^.pgia-slider|.pgia-slides-container","l":[{"t":"tween","p":0,"d":0.5,"l":{"scrollTo":{"dest":"prev_page"}}}]}]},"pdef":"true"}]}'>&lsaquo;</a>^.pgia-slider|.pgia-slides-container ^.pgia-slider|.pgia-slides-container ^.pgia-slider|.pgia-slides-container<a class="next pgia-control" href="#" data-scroll-to="next">&rsaquo;</a>
    <div class="pgia-pagination"><a class="pgia-pagination-item" href="#"></a>
    </div>
</div>

```

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 15, 2022, 9:44am UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/2 "2022-04-15T09:44:19Z")

</div>

Hi @kat,

> [@kat](#):
>
> I can’t get back to “Action list and click on Interactions.”

Can’t you just click on the “Interactions” at the top of the list at the left of the image? Looking at the tutorial now, I don’t exactly like the naming of the panels that was used. I guess it could be a bit ambiguous.

> [@kat](#):
>
> Do you have a parts of timeline names like tool tips? Some places have tool tips, others not. I’d like to see a visual timeline dissection.

Does this work from the documentation? [Timeline Editor | Pinegrow Web Editor](https://pinegrow.com/docs/interactions/timeline-editor/)  
Cheers,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 15, 2022, 1:42pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/3 "2022-04-15T13:42:56Z")

</div>

> [@RobM](#):
>
> click on the “Interactions” at the top of the list at the left of the image?

ALL INTERACTIONS \>INTERACTIONS Interactions \> Seems both Hide At Start & Interaction have to be selected so both are blue.  
Then the interactions panel & the Hide at start are both visible.  
Do I need “Enable on” desktop or mobile selected?

* * *

1. Target elements are selected with the [element selector control]  
Is the element selector control in the timeline the top insert box with the target circle?

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 15, 2022, 3:23pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/4 "2022-04-15T15:23:56Z")

</div>

Hi @kat,

> [@kat](#):
>
> ALL INTERACTIONS \>INTERACTIONS Interactions \> Seems both Hide At Start & Interaction have to be selected so both are blue.

Correct. They are separate things.

> [@kat](#):
>
> Do I need “Enable on” desktop or mobile selected?

If you only want something hidden at the start on one or the other you can activate, otherwise it is hidden on both automatically.

> [@kat](#):
>
> Target elements are selected with the [element selector control]  
> Is the element selector control in the timeline the top insert box with the target circle?

Yup. But if you only have a single target that the Interaction is added to as a target you can use the Target input in the main Interactions options.  
Cheers,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 16, 2022, 12:10am UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/5 "2022-04-16T00:10:44Z")

</div>

3/4 of the way thru Booklers.

1. A single animation can have multiple animations numbered 1, 2, 3…  
A single animation with only 1 animation also has a number 1, 2, 3…  
Trying to figure out which animation is what number is confusing. Clarification please.

2. The Timeline remains open to whatever the last animation was. When I create a new animation on a new target I have to close the Timeline then click Edit Animation in the Animation planner. Seems a bit cumbersome. Do I have this correct?

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 16, 2022, 9:36am UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/6 "2022-04-16T09:36:47Z")

</div>

Hi @kat,  
I can’t find the specific set of instructions you are referring to with your first question. I see the tutorial is in sections. Can you narrow it down that way, please?

For your second question, you don’t have to close the previous animation, just click the edit animation button and it will swap out for the new one.

Hope this helps,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 16, 2022, 5:34pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/7 "2022-04-16T17:34:01Z")

</div>

Why Choose Booklers section doesn’t work.

 ![WhyChoose](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5e510b10371c6090a2f179a60c73c55a20eb400d.png)  
Articles section does work  
 ![Articles](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8b53f94ee90ce4d6f9423086a6395bde5679bd71.jpeg)

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 17, 2022, 10:21am UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/8 "2022-04-17T10:21:23Z")

</div>

Hi @kat,  
Are you sure the first section isn’t working? It might be that for your viewport that the animation happens a little fast so that when you are full in view the animation has already occurred. You can “fix” this by going to the main “Scroll Scene” interaction, clicking on the “Start and End” option, select “Describe”. For start select “Start” for “Scene elements” and “Center” for “…reaches the”. “End” doesn’t matter in this case, but I set “The” to “Center” and “…reaches scroller’s” to “Center”.  
Let me know if this helps,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 17, 2022, 2:36pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/9 "2022-04-17T14:36:43Z")

</div>

[https://mcgraphics.us/Booklers-Basic/](https://mcgraphics.us/Booklers-Basic/)  
Interesting, but didn’t work.

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 17, 2022, 4:07pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/10 "2022-04-17T16:07:57Z")

</div>

Hi @kat,  
From the page it looks like maybe your target is set incorrectly. Here is what mine looks like"

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f18ed59a7478f18d95c7adf4f6bef2bd36ce8769.png)  
In my code the target output is:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b7a04fbdf10b82da3298448d889408a43e1372d2.png)  
Yours is (starting after the first “t”):  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/78892999db1686a7cc5882c92fd19758d494c8b9.png)  
Good Luck,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 17, 2022, 10:54pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/11 "2022-04-17T22:54:36Z")

</div>

I am getting more comfortable with Interactions.

1. ,“t”:".features-post" doesn’t work. Files online updated.

````auto
<div class="container py-5" data-pg-ia='{"l":[{"t":"h2","a":"fadeInUp"}]}' data-pg-ia-scene='{"s":"custom","s_t":"center","e_t":"center","l":[{"t":"h2","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0,"y":"100%"},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":1,"s":0.25,"l":{"autoAlpha":1,"y":"0%"},"e":"Power1.easeOut"}]}]},"p":"time"},{"t":".mb-5","a":"fadeInUp","p":"time"},{"a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0,"y":"100%"},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":1,"s":0.25,"l":{"autoAlpha":1,"y":"0%"},"e":"Power1.easeOut"}]}]},"p":"time","t":".features-post"}]}'>```

2. Only the first image rotates correctly. Instructions: reset the image position we should enter a number between 0 to 100. So let’s enter 50 on both.
````

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 18, 2022, 11:23am UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/12 "2022-04-18T11:23:03Z")

</div>

Hi @kat,  
I noticed that there is an interaction without trigger above your scroll scene, while this isn’t causing a big problem, it could create an error under some circumstances. Second, the start and end descriptions aren’t fully set.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/d/d70bdadb2f95f89ed8cb4b04093b8ee1f891b9ac.png)  
This works for me. Adding “hide at start” to each on the columns will make it more visible.  
Cheers,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 18, 2022, 1:30pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/13 "2022-04-18T13:30:28Z")

</div>

I deleted Interactions leaving Scroll Scene after watching your bookler tutorial again. Scrolling down section does not show but getting to bottom and then scrolling up shows section, but no interactions.  
[https://mcgraphics.us/Booklers-Basic](https://mcgraphics.us/Booklers-Basic) Hide at Start on individual items, rather than container  
You tutorial shows Enter. I don’t have an enter in my PG Scroll Scene

 ![yourTutorial](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/44f77a0d506081a267412d6199d5d313febd0be3.png)

 ![Kat Scroll Scene](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/c0c329e1dd1d020c1cd63c1e6e0d48d13e45d467.png)

 ![Kat HideAtStart](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/fa18170ea8d58cbe94d78627a4fa34b00a978a89.png)

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 18, 2022, 6:34pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/14 "2022-04-18T18:34:20Z")

</div>

Hi @kat,  
Two thoughts/suggestions.

1. Try setting the “Start When” to match mine above. I think the animation is happening outside of the viewport. You can also try turning on the “reverse in opp. dir” and “replay every time” options for each of the animations.
2. Download the finished project and take a look at how the animations there might differ from yours.

Cheers,  
Bob

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 18, 2022, 8:17pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/15 "2022-04-18T20:17:36Z")

</div>

Bookler-Finished doesn’t work either. The bottom section work well, but the middle section still doesn’t. Ah well on to slider.

---

<div class="post-metadata">

### Author: ![kat](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/kat/32/2221_2.png) [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [April 21, 2022, 2:38pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/16 "2022-04-21T14:38:15Z")

</div>

What do the various interactions blue icons on the tree mean? Documentation url please.

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 21, 2022, 6:06pm UTC](https://forum.pinegrow.com/t/accordion-tutorial/6493/17 "2022-04-21T18:06:30Z")

</div>

Hmmm, can’t find where in the documentation they are, but:  
This symbol means an interaction -  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/3bd21b0a783aa12c7c2b70d8afafcdee7d453ce3.png)  
This symbol means “Apply to many” -  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/bafb19d9340d8d56332049cd4c566234bab01142.png)  
And this symbol means “Scroll scene”  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/ffbc951db7d92e4d81e5f120d450fd9681dad4f3.png)  
Hide at start  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/ba71d32198d5016e9aeb42308378ddf8fe7cdce0.png)  
Show at start  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/89c2bf5b08ebed5e86273178d257557a943d7611.png)  
Bob
