Creating a link to collapsible content to open in a different content item

Highlighted
Occasional Contributor

I'm trying to create a link within my page which, when clicked, expands content in a separate text area.

 

This is the unpublished page I am working with: https://info.xyplanningnetwork.com/adv-updates-2020-0?hs_preview=vAOYDCsZ-23374750411

 

What I currently have configured is a collapsible box which opens/closes within the same Rich Text content item when clicked:

Collapsible content.gif

 

This is the HTML code (there is CSS for the styling and JS for the action):

 

<button class="collapsible" type="button">Click here to complete the Annual ADV Update Form</button>
<div class="content">
<h3>Annual ADV Update Form</h3>
<script type="text/javascript" src="https://xypn.formstack.com/forms/js.php/annual_adv_update_form"></script>
<noscript><a href="https://xypn.formstack.com/forms/annual_adv_update_form" title="Online Form">Online Form - Annual ADV Update Form</a></noscript>
<div style="text-align: right; font-size: x-small;"><a href="http://www.formstack.com?utm_source=jsembed&amp;utm_medium=product&amp;utm_campaign=product+branding..." title="Powered by Formstack">Powered by Formstack</a></div>
</div>

 

The experience I'd like to create is when the button is clicked, the area which expands is actually in a separate Rich Text content area (in this case, so the expanded/collapsible area can be full width). 

Image 2019-12-12 at 5.29.33 PM.png

Image 2019-12-12 at 5.37.18 PM.png

 

I've tried dividing the HTML so the "link" portion lives in the top Rich Text content area:

<button class="collapsible" type="button">Click here to complete the Annual ADV Update Form</button>

 

And the form I want to open/close lives in the bottom (full-width) content area but this doesn't work.
<div class="content">
<h3>Annual ADV Update Form</h3>
<script type="text/javascript" src="https://xypn.formstack.com/forms/js.php/annual_adv_update_form"></script>
<noscript><a href="https://xypn.formstack.com/forms/annual_adv_update_form" title="Online Form">Online Form - Annual ADV Update Form</a></noscript>
<div style="text-align: right; font-size: x-small;"><a href="http://www.formstack.com?utm_source=jsembed&amp;utm_medium=product&amp;utm_campaign=product+branding..." title="Powered by Formstack">Powered by Formstack</a></div>
</div>

 

I know I've done this in other CMS platforms; I don't know if the issue is I'm not remembering the configuration or if this is a limitation in HS to be able to achieve this experience.

 

TIA for any help

Reply
0 Upvotes
1 Reply 1
Regular Contributor

Hello @kdemars ,

 

We are reviewing your request will keep you posted soon

 

Thanks,

Ramesh

Krishang Technolab

Reply
0 Upvotes