HTML Widget Example: Expand/Collapse Content

One important benefit of using Layar is to offer more content on top of the fixed /static print page. Instead of putting many buttons that might ruin the users experience of reading the actual print content, you can implement a HTML widget that can nicely expand /collapse additional content. This can be very useful if you want to add FAQs, explanations of certain products, etc. This will also add some user interaction to the campaign.

We have implemented an example in the Layared Magazine. You can scan the page below to see it in action.


In this example, we added a HTML widget that contains three segments of expandable/collapsible content. Clicking on each header, such as "Our History", will reveal the details of that section. To hide the content, you just need to click on the same header again.


The source code can be downloaded below so that you can play with it. You will need to have basic knowledge about HTML, Javascript and CSS.

Here is some code snippets, you can change the header texts in <h1></h1> and the content under <p></p>.




In this example, we only add text as the content, you can of course change it to include another type of content, such as images.

The source code of this example is licensed under the MIT license at

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request


Powered by Zendesk