Creating a “read more” link that extends the content on the page

Question

I would like to create a read more link that would extend a paragraph already being shown to reveal the entire text on the same page. If this could be solves with HTML5 and

Answer 1

I created something easy to use

• set a class to the content "div"
• use "<!--more-->" to separate the click-to-display contents from the always visible contents
• everything else will be taking care of by css and js

HTML:

<div class="m-more-less-content">
Lorem ipsum dolor sit amet, <!--more--> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

See example here

Answer 2

Here's a pure HTML + CSS solution. You can style the "show more" checkbox using CSS to make it fit your needs, including hiding the checkbox part.

http://jsfiddle.net/T7eXL/

<div id="box">
    <p>Lorem ipsummy</p>
    <input type="checkbox" class="show-more"> Show more
    <div class="more">
        <p>Lorem</p>
    </div>
</div>

.more {
    display:none;
}

#box .show-more:checked + .more {
    display:block;
}

Answer 3

Yes it is ... this is just a small example http://jsfiddle.net/QDg4P/3/

<div>
<h1>Example text</h1>
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor feugiat ipsum quis ullamcorper. Nullam vitae velit vitae tortor semper tempor ac vitae magna. Maecenas a ullamcorper neque. Aliquam vitae tortor luctus nisi rutrum eleifend non non leo.</p><a href="#" onclick="show('example1')"> read more </a>
<p id="example1" style="display:none; font-weight: bold"><img src="http://tux.crystalxp.net/png/kami23-flower-tux-4037.png"/>Sed eleifend lectus id semper accumsan. Sed lobortis id ligula eget blandit. Integer interdum iaculis nunc, sed porttitor magna tincidunt in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam lobortis accumsan tempor. Aliquam sollicitudin pulvinar est, quis convallis tellus.</p>

<script>
 function show(ele){
     document.getElementById(ele).style.display = 'block';   
}
</script>

Answer 4

after text put that code

<p><a onclick="javascript:ShowHide('HiddenDiv')">Read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;">
    <font face="Arial" size="+2" color="#306Eff" align="right">YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE
 YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE YOUR REST OF THE TEXT HERE
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
    if(document.getElementById(divId).style.display == 'none')
    {
        document.getElementById(divId).style.display='block';
    }
    else
    {
        document.getElementById(divId).style.display = 'none';
    }
}
// ]]></script>