Sidebar + iframe - Dynamically change iframe "src" value based on value from dynamic collection

Design help Custom code
1

Hi guys!
I am trying to make a wedding planning resources site that has a sidebar with categories and links to other useful sites in each category. The desired behavior is as follows:

  1. Left sidebar contains links
  2. User clicks on a link
  3. iFrame (using HTML embed) in the main body changes the src based on which link was pressed

My dynamic collection of links has a url property which I would like to bind to the src in my iframe.

Any ideas how I can achieve this?

Here is my public share link: https://preview.webflow.com/preview/wedding-planning-resources?preview=9148ce4a546dd549f82419d05e1315fc
(how to access public share link)

2

I found my workaround by looking on the forums! I simply duplicated my sidebar in the Link Details page and dynamically bound src to reflect the appropriate link.

I have a small problem with maintaining the state of the sidebar though:

  1. If I started off in category A, the button representing it should look different in its “focused” state.
  2. Upon redirecting to the Link details page, the sidebar would reset to its initial state (expected behavior for the workaround)

Any ideas how I can have both the dynamic iFrame as well as maintaining the ‘same’ sidebar?

3

Insert an iframe into content area using embed code.

Paste this into Page Settings > Footer Code:

<script>
$('.wedding-planners-links').on('click', 'a', function() {
  $('iframe').attr('src', this.href);
  return false;
});
</script>

View using published link.

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.