Streaming live at 10am (PST)

Using javascript to pull content from CMS fields on button click

Hi there,

Looking to be pointed in the right direction/ the right terminology to search to keep more information. I’m thinking of having a collection that has fields for different steps and pulling the field content into a page so that each time the ‘Next’ button is clicked, the content will get replaced with the different field content.

I know I will need to use custom code and javascript - I’m just not sure what terms I need to be searching for to find out how to implement something like this or any resources that would be helpful to look at. Any help would be greatly appreciated!

Hi @emmac :wave: I believe there’s a better, simpler approach for you.

If you create 4 CMS Collections, you’ll also get 4 associated CMS Template Pages automatically created for you.

What’s awesome about these CMS Template Pages is that you can get the field values out of the CMS Collection that it’s associated to and display it on the page.

So in your example, the “Step Two” page would have access to all of the “Step Two” CMS Collection items and its field values.

Hey @ChrisDrit - thanks for your response! I probably should have explained myself better - I was trying to make the situation more understandable but in reality I’m looking at around 15 steps, not 4. So not sure if this would work! If only I could keep it at 4 :sweat_smile:

I have figured out how to use javascript to change the content (plain text) on button click to another step which will work for what I’m trying to do - but now trying to see how to do it with rich text so that I can use formatting. https://preview.webflow.com/preview/dinner-dabbler?utm_medium=preview_link&utm_source=designer&utm_content=dinner-dabbler&preview=44ea71069fdf47af4dc68b83d6cae68a&pageId=5f43df37b688dba01c78256c&itemId=5f43df869ce876689b39784b&mode=preview

1 Like

Essentially what I think your need to do is have the elements hidden (a collection list with 15 rich text fields for example) on the page you want to display the steps on. Using JavaScript or Interactions you could toggle the visibility of elements on a button click thus revealing the steps. Personally I think an accordion might be a better model since it works well with mobile (stacked content).

1 Like

@mikeyevin Just jumping onto this as I have a similar problem. I’m creating something where each time you click a button it will display copy from a field in a CMS collection.

I got it to work with javascript when the field was a plain text field as I could select the field in the custom code.

However I decided that I wanted to be able to style some of the copy by having some words in bold. However when the field is rich text I’m unable to select it in the custom code.

Is there any way around this?

Without seeing the project in question it would be hard to recommend a solution. Can you include your read-only link so I can take a peek?

Hey @mikeyevin thanks for your response - have just added a bit more human wording to my set up so its easier to understand than lorem ipsum!

Here is the link: https://preview.webflow.com/preview/dinner-dabbler?utm_medium=preview_link&utm_source=designer&utm_content=dinner-dabbler&preview=44ea71069fdf47af4dc68b83d6cae68a&pageId=5f43df37b688dba01c78256c&itemId=5f43df869ce876689b39784b&mode=preview

At the moment I’ve played with Javascript only a bit and when I click the button I can go from my Method Step 1 to Step 2 with the plain text. Which is great and I know with more thought I can have the button click run through each of the steps in the method collection. But I would prefer to be able to do this with a rich text field so that I can format each step to highlight specific words.

@emmac- Please don’t cross post and hijack another thread.

Hi @webdev - sorry didn’t mean to do that. I was in two different discovery phases and was looking at the other thread as more specific to the problem I had with Rich Text Fields.

No issue, just trying to keep the place clean: :grinning:

I had a side demo I went back and looked at to see if it was similar. It might give you a jump start. I cleaned it up to share.

1 Like

Thanks @webdev this isn’t an approach I’d considered before so will do some exploration around it. Will post my hopeful success here in the future! :slight_smile: