You are here: Home / Freebies For Websites / Demos & Snippets

Read More

Simple "read more" JavaScript function that reveals more content onclick.

Useful for FAQs or Questions & Answers pages. Also great for conditionally revealing long content on mobile.

Works in modern browsers and IE8+

Please view the source of this page to see the HTML markup and JS.

This is a short intro/excerpt for entry 1... Read More

This is a short intro/excerpt for entry 2... Read More

This is a short intro/excerpt for entry 3... Read More

 

Conditionally hide long content on mobile

Shrink your browser window to less than 960px wide to see the effect of this next demo.

This example hides long content on mobile (<960px for this demo) but keeps it visible on desktop... Read More

• This is the start of stuff that is hidden behind the "read more" button on mobile.
• On a narrow screen, you have to tap/click the "read more" button to reveal this list.
• On a wide screen, you will see this list as normal, but the "read more" button will be hidden instead.
• CSS Media Queries are used to hide or show this content at various screen widths.
• There is an extra line of JS that adds a class to the HTML tag so that content is only hidden if JavaScript is on.
• When JavaScript is disabled, all content will be visible by default, regardless of screen size.
• View the source code to see how its done.

 

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.