Using Jquery to toggle HTML and CSS
===

I'm looking to use jquery for a sort of toggle button to toggle between the two below states;

![Toggle A][1]


![Toggle B][2]


  [1]: http://i.stack.imgur.com/9MmCE.png
  [2]: http://i.stack.imgur.com/JOSYq.png

So everything in picture A (above the red line) is hidden when i click the Toggle Button/link and when i click the toggle button again, it reappears.

I've been looking into Jquerys toggleClass function;

    $("button").click(function(){
    $("p").toggleClass("main");
    });

But this i beleive would only hide the CSS, not the HTML too. Am i misusing the function or is not make for this?

thanks