Question

I have a CSS script which has 5 buttons.

Clicking the first button should display a text on the same page in a fixed region (maybe by using frames or writing a hidden function and then doing show()).

If the second button is clicked, some other text should appear in the earlier region. Similarly for other buttons. What would be the most efficient way of doing this? (Achieving the fastest loading of the page).

Answer 1

Try this:

HTML

<div id="textcontainer"></div>
<button id="button1" onclick="setText(0);">Button 1</button>
<button id="button2" onclick="setText(1);">Button 2</button>
<button id="button3" onclick="setText(2);">Button 3</button>
<button id="button4" onclick="setText(3);">Button 4</button>
<button id="button5" onclick="setText(4);">Button 5</button>

Javascript:

var text = [
  'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.',
  'Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.',
  'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.',
  'Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.',
  'Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.'
  ];

function setText(index){
   var box = document.getElementById('textcontainer'); 
  box.innerHTML = text[index];
}

You can see this in action at: http://jsfiddle.net/Wnw7X/