Expanding paragraph (html) for news section

Question

I'm not sure how to go about this. I have a news section on a website I maintain and I'm trying to get it to display about 10 news items. Then I want to give users the option to click "more" for the rest, and the "less" for back to default. The document is xhtml and css and I'm trying to use as little javascript as possible. Any ideas?

Answer 1

If you want all the news article to actually be on the page, just invisible, versus having to request more from the server when the user clicks more, and you don't want to use the awesome javascript library called JQuery, then I suggest you get familiar with the Javascript method, document.getElementById. You can use it like this:

<a id="moreless" href="javascript:moretoggle()">More</a>
<div>some news</div>
<div id="morediv" style="display:none;">more news</div>

<script>
function moretoggle() {
    document.getElementById("morediv").style.display = document.getElementById("morediv").style.display == "none" ? "block" : "none";
    document.getElementById("moreless").innerHTML = document.getElementById("moreless").innerHTML == "More" ? "Less" : "More";
}
</script>