Braindead to Accordions for al!

Elements
1

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>language.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

<iframe class="pdf-frame hidden fade w-full h-full border rounded-xl shadow-lg"
              src="pdf1.pdf"></iframe>
2

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 with your actual domain name.

3

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!

4

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

5

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
CleanShot 2025-10-24 at 9 .08.40@2x1920×1467 1.07 MB

1 Like
6

Thanks will have to a look tomorrow when back at computer

7

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

<iframe class="pdf-frame hidden fade w-full h-full border rounded-xl shadow-lg"
              src="resources/instructions/dutch.pdf"></iframe>
8

did you look in the hooks file of the html element in the project file?

9

Try adding your pdf in my actual test project and see what happens there.

10

See I told you I was brain dead! :slight_smile: 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

11

add this to your page instructions hooks file:

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
CleanShot 2025-10-25 at 1 .53.37@2x2060×776 67.3 KB

12

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
Screenshot 2025-10-25 at 14.56.012196×926 151 KB

13

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

CleanShot 2025-10-25 at 3 .24.28@2x
CleanShot 2025-10-25 at 3 .24.28@2x1920×1150 457 KB

1 Like
14

Now for your homework :joy:

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.

15

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!

16

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.

1 Like
17

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

18

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.

19

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.

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
CleanShot 2025-10-26 at 13.33.07@2x612×1206 113 KB

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.

4 Likes
20

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

Also Can I have a copy of your project to play with? TIA