HELP !! STUCK in content addition !!

Hello,
I have a site www.anewraag.com. I want to add some good content on its home page in such a way that users see tht content when they click on content's heading, it means whenever someone clicks the heading or a "+" sign he should b able to expand and See the description of tht heading. Something like this.
I don't know much scripting, i tried to do this myself through some online tutorial but didn't got much success.

Please provide some guidance on this issue in detail.
Thanks,
Harsh

 

Try something like this:

- put your content into a <div> element with a specific id.
- set in your CSS file (or in inline styling) the display property to none.
- write a javascript function which changes the display to 'block' when called
- call that function on a click event

HTML:

<a href="#" onclick="toggleDisplay('exampleDiv'); return false;">Open content</a>
<div id="exampleDiv" style="display:none;">
CONTENT
</div>

HTML:

JS:

function toggleDisplay(id)
{
  if (id == undefined) return;
  var elm = document.getElementById(id);
  if (!elm) return;

  elm.style.display = (elm.style.display == 'none' ? 'block' : 'none');
}

Code (markup):

 

Thanks for the code. Rep added.