# Braindead to Accordions for al! **URL:** \ **Category:** Elements\ **Created:** [October 24, 2025, 4:17pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000 "2025-10-24T16:17:42Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 24, 2025, 4:17pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/1 "2025-10-24T16:17:42Z")
I am trying to embed a pdf - I have instruction PDF’s in different languages - I have a folder in resources and need to copy link into a HTML coded bit I have done. currently my folders paths is: resouces\>pdf\_instructions\>l_anguage_.pdf I now ant to replace each one with the language. I have the current code but need to know what path is to replace the src=“pdf1.pdf” bit to get my file to show up. TIA @dan @ben ```auto ``` ---
**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\ **Post date:** [October 24, 2025, 4:45pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/2 "2025-10-24T16:45:59Z")
Could you try: `src="resources/pdf_instructions/language.pdf"` and see if that works, replacing _language.pdf_ with the actual name of the PDF file. Depending on where you are trying to embed it (externally for example), you could try an absolute path, like: `src="https://example.com/resources/pdf_instructions/language.pdf"` replacing _[example.com](http://example.com)_ with your actual domain name. ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 24, 2025, 5:47pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/3 "2025-10-24T17:47:15Z")
I tried the first one as I have them locally in resource file and got “page not found” error. Initially I had a space between pdf and instructions but joined it to see if that helped which it didn’t! THANKS for your help but I will have another try tomorrow. Have a great evening! ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 24, 2025, 6:05pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/4 "2025-10-24T18:05:42Z")
> [@PMUK](#): > > `hidden` You know you have the “hidden” class on your iFrame? Maybe “fade” fades in in on page load?. I can’t find a way to make it fail using the paths you said you’re using. Unless I add a hidden class. Project file: [Embed PDF Test Project](elementsapp://downloadDocument/wWy6NogeeixK) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 24, 2025, 8:09pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/5 "2025-10-24T20:09:59Z")
And oh boy, I’m not a Chrome user, but how much better an embedded PDF looks in Chrome. Thats just like Preview app. ![CleanShot 2025-10-24 at 9 .08.40@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/5/253745fae1399ef4ffb2d4e472782a40f3d7f7f4.jpeg) ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 24, 2025, 8:18pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/6 "2025-10-24T20:18:55Z")
Thanks will have to a look tomorrow when back at computer ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 25, 2025, 11:24am UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/7 "2025-10-25T11:24:42Z")
Good morning at computer now. I have put your code in and added the dutch.pdf and I get an error message “file not found” when previewing TIA ```auto ``` ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 25, 2025, 12:20pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/8 "2025-10-25T12:20:42Z")
did you look in the hooks file of the html element in the project file? ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 25, 2025, 12:21pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/9 "2025-10-25T12:21:52Z")
Try adding your pdf in my actual test project and see what happens there. ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 25, 2025, 12:36pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/10 "2025-10-25T12:36:57Z")
See I told you I was brain dead! 🙂 I did not see your test embed. I added my Dutch pdf and it worked. I now want my accordion style to show PDF in right now window. but copied tour text in and got same message (file not found” I attach my accordion - very basic at moment but the way I want it but thought I would try PDF embed first before going much further. I attach file for the code and I have changed accordion one HTML Code to what worked in your test. TIA [elementsapp://downloadDocument/Yx5FnJfnmaNW](elementsapp://downloadDocument/Yx5FnJfnmaNW) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 25, 2025, 12:54pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/11 "2025-10-25T12:54:41Z")
add this to your page instructions hooks file: ```javascript const transformHook = (rw) => { // Make page object available to the template rw.setProps({ page: rw.page }); } exports.transformHook = transformHook; ``` This allows you to get the url to the resources directory for the page. Thats it, well so far you only have the correct url for the pdf inside your “Load” accordion section. ![CleanShot 2025-10-25 at 1 .53.37@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/8/a8e01652ea3e2004d6856becb0dd40a7beb83c2d.png) ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 25, 2025, 1:58pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/12 "2025-10-25T13:58:17Z")
**STAR!!!** now I have it showing but its as picture and I have adjusted W- and H- settings but this does not affect PDF but the box size, how do I increase the PDF size so its not the whole booklet but just top of first page? TIA ![Screenshot 2025-10-25 at 14.56.01](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/5/d571d950f75fb936bdcbdf401a7e568127beca1e.jpeg) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 25, 2025, 2:22pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/13 "2025-10-25T14:22:46Z")
Fixed by using an object instead of an iFrame. Cleaned up a few things so the whole thing works now. Also , never, never include the document, head, and body(tag) in a custom component. Elements handles that. [Fixed Project Download](elementsapp://downloadDocument/XaBbBO1gvisZ) ![CleanShot 2025-10-25 at 3 .24.28@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/7/9773e088017ba7314e93d2c60a287dd3d7d49a25.jpeg) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [October 25, 2025, 2:34pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/14 "2025-10-25T14:34:07Z")
Now for your homework 😂 Throw the complete code at ChatGPT and say : “How to make the first accordion item open on page load, in full please” I suggest you experiment in a copy of the project file. ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 25, 2025, 4:18pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/15 "2025-10-25T16:18:20Z")
Amazing you’re a STAR and a GENTLEMAN! AHHH I dont want first to open as I have that but in this case I have a place holder image! Tomorrow or Monday I will put three Accordions up for free all the same structure, but one is for images, one for videos and now one thanks to you for PDF I am working on Audio so might have 4 we wait and see! HAVE A GREAT EVENING! ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [October 25, 2025, 6:08pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/16 "2025-10-25T18:08:26Z")
Aloha Paul, If you don’t mind, I’m going to play around with generalizing this code so that the accordion concept is a single component. That way, you can then add as many as you like and mix and match them if they have different content. ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 25, 2025, 9:34pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/17 "2025-10-25T21:34:08Z")
Fill your boots, I started this project needing an accordion with 7 accordions and seven pictures that changed on each accordion, I posted this last week. I then thought what else can I do so added a matching video that changed with each accordion, achieved that then today with Gary’s help (@Doobox) I added a PDF in second column and I am working on audio at moment. I can make as many accordions I need however the part was to have a changing image/PDF/Video?audio in second column and hence why I went on custom HTML root as Elements accordion does not do this. SO my ideal would be an Elements accordion with a code to fill right hand column in. Away you go! TIA ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [October 26, 2025, 12:56am UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/18 "2025-10-26T00:56:09Z")
That is what I’m currently working on, but I decided to start from scratch. You can have “n” accordions that share a common image/video/PDF display area. Essentially a group of accordions. There can then be as many groups on the page as you need. Will share when I have it working. Eventually, I would like it to use the standard accordion component by adding code that listens for a click and handles the display of the image. But first I need to get the basic version working. Then once I have all of the properties figured out I can look at how to tie it to the standard component. ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [October 26, 2025, 11:36pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/19 "2025-10-26T23:36:44Z")
I finally have a working version of a multi-accordion group with an associated image. I ended up going down a rabbit hole, deciding that, for it to be really useful, you needed to be able to create as many accordions as you required. To do this elegantly in Elements, you need to use a COLLECTION. So that is the route I took. Took a lot of studying to figure out how to use a collection. By using a collection, you can specify the details for each accordion through the item properties, using the collection property inspector you can then create whoever many you need. It allows you to enter a TITLE, CONTENT, an associated IMAGE (other things in the future), and whether the accordion is initially expanded or not. This is what it looks like in action. > **[CleanShot 2025-10-26 at 13.24.42](https://share.cleanshot.com/xJwj89n6)** > > GIF uploaded to CleanShot Cloud Here are the current properties for the component. I will gradually add all the styling properties so that, eventually, all aspects of the element can be controlled. ![CleanShot 2025-10-26 at 13.33.07@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/7/8731d59d5c1ecddbf1804da11cd08bc0de3e12b9.jpeg) This was an interesting project. Still lots to do, but it is now functional enough for my use case. NOTE: the Expanded property WILL NOT be responsive, just forgot to set the flag. ---
**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\ **Post date:** [October 27, 2025, 12:18pm UTC](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000/20 "2025-10-27T12:18:47Z")
Cool I have done a video one, a PDF one (with the help of @Doobox and my original pics. I attach my video one to see if you can adapt this to your project. [elementsapp://downloadDocument/d1yTaOCvdKCy](elementsapp://downloadDocument/d1yTaOCvdKCy) Also Can I have a copy of your project to play with? TIA [Next page](https://forums.realmacsoftware.com/t/braindead-to-accordions-for-al/52000.md?page=2)