# Custom Accordian

**URL:** https://forum.pinegrow.com/t/custom-accordian/4869
**Category:** Beginners
**Created:** [January 23, 2021, 9:45pm UTC](https://forum.pinegrow.com/t/custom-accordian/4869 "2021-01-23T21:45:12Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![bwconley](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@bwconley](https://forum.pinegrow.com/u/bwconley)
#### Post date: [January 23, 2021, 9:45pm UTC](https://forum.pinegrow.com/t/custom-accordian/4869/1 "2021-01-23T21:45:12Z")

</div>

I followed the video instructions for the accordion interactive demo. The first section expands and contracts but the rest do not. The example and the current editor are slightly different. The finished project works and the starter with my edits does not only on the first section. The other three (3) sections are contracted but do not expand. The apply to many does not work. Any help is greatly appreciated. I paid for the interactive addon and I think I have thirty (30) days to return for a refund. Any help is greatly appreciated.

Thanks,

Bruce W Conley

---

<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: [January 24, 2021, 1:40pm UTC](https://forum.pinegrow.com/t/custom-accordian/4869/2 "2021-01-24T13:40:28Z")

</div>

Hey @bwconley,  
Sorry to hear you are struggling. Maybe you can provide some screen-shots of your animations? Ideally, if you could use a file transfer service to supply the whole project I could find the problem a little easier.  
Cheers,  
Bob

---

<div class="post-metadata">

### Author: ![bwconley](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@bwconley](https://forum.pinegrow.com/u/bwconley)
#### Post date: [January 24, 2021, 2:08pm UTC](https://forum.pinegrow.com/t/custom-accordian/4869/3 "2021-01-24T14:08:55Z")

</div>

Bob,

Here is the link with the project folder/files:

[https://1drv.ms/u/s!AidumY4GsoxuhOE-FvQmpXh9ZggjyA?e=NwGod0](https://1drv.ms/u/s!AidumY4GsoxuhOE-FvQmpXh9ZggjyA?e=NwGod0)

Thanks,

**Bruce**

**Bruce W Conley - The Computer Coach**

3717 2nd Avenue  
Beaver Falls, PA 15010-3401

**Office/Cell:** 724-316-9737  
**Fax:** 425-675-1483

[http://TheComputerCoach.US](http://thecomputercoach.us/)

---

<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: [January 24, 2021, 3:31pm UTC](https://forum.pinegrow.com/t/custom-accordian/4869/4 "2021-01-24T15:31:42Z")

</div>

Hey Bruce,  
Two mistakes

1. If you look at your ‘.accordion–header’ apply to many interaction you can see it is orange.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/619950b8ef90abe656343cdab8ac980bcc436bc5.png)  
In Pinegrow, that color either means you are actively working on the field, or there is an error. In this case, it is the later - you misspelled ‘accordion’ as ‘accordian’
2. I guess you didn’t change the selector for the first timeline animation for the ‘.accordion–header’. You have:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b2686fb6111b33bd6d9b2f0a07d733525382d4aa.png)  
It should be:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/28786fe0e4e6b1cde637cc1d5af8c6546c7fbdc2.png)  
This selector will travel up the DOM tree to the ‘.accordion–item’ parent, and then down the tree to the ‘.accordion–content’ that should be animated. Your selector will always choose the sirst section of content.  
Good Luck!  
Bob

---

<div class="post-metadata">

### Author: ![bwconley](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@bwconley](https://forum.pinegrow.com/u/bwconley)
#### Post date: [January 24, 2021, 4:03pm UTC](https://forum.pinegrow.com/t/custom-accordian/4869/5 "2021-01-24T16:03:23Z")

</div>

Thanks… made the changes and it works…