Expand and Collapse Copy on Landing Pages?

[Anonymous]

Is there any way to expand and collapse copy on a Marketo landing page? We have one built that has quite a bit of copy and would like to set it up so the user can click on an arrow to expand copy sections and reclick it to collapse.

Any idea if this is possible?
Thanks!

[Anonymous]

That will require the addition of custom HTML code.  You can google "collapsible sections html" to see several suggestions.

[Anonymous]

You might be able to use javascript by dragging in Custom HTML and adding the code there.

I have also seen people use the multi tab method where you have copy on three pages and bring all three into tabs on a fourth page. Not quite sure how to execute that.

[Cecile_Maindron]

I like the idea and would be interested to learn how to implement that!

[Anonymous]

I've searched for HTML online, but it has a lot of jQuery in there as well. I'm not familiar with it and need to do the page myself. Anyone know of a way to do this w/out jQuery?

Or have an easy explanation of how to do jQuery - I can't seem to figure out where to put the strings I see online to copy!

[Anonymous]

I'd say you need to use jQuery. Does a simple accordion method work?  This is also a high-concern to me, that I show/hide content on a page, you do so by nesting a div within a div and then using javascript/jquery to show/hide the div.

<div id="containerbox">
<h1>Heading</h1>
<p>Short intro text to intice you to click <a href="#more">+</a> </p>
<div> id="innercontent" style="display:none;">
<p>Here you put the longer texts.</p>
</div>
</div>

then you need a bit of jQuery/Javascript written that says onClick of link #more, then change div style id="inntercontent" style:display=shown.

I will be working on this script in the coming month. but it isn't a #1 priority to me. When i get it working well I will post the results on the community.

As far as using jQuery UI-Accordion, it is quite easy to implement. Here is a mockup from my test environment over the functionality of an accordion. Note that according to it's basic logic, only one box can be open at a time, but I don't see why there couldn't be multiple accordions per page (but I haven't tested that to know specifically if it will work).

Please note I typically keep test pages for around 2 month and then delete them, so if you come to this some time later & the page isn't working let me know and I'll direct you to where in the live environment this solution can be found, or why I choose not to implement a given solution.