How to take a whole page of content that is hidden and only show a specific piece when clicked via anchor

Question

I have a bunch of content on a page that has anchors to locate each one, the anchors are basically like the bookmarks and the content that the anchors lead to i used hide(); with the exception of the first paragraph, because it's just introductory stuff. What my end result goal is:
When I click on an anchor it will unhide just that ONE paragraph and keep the rest hidden. Then when I click on another anchor it re-hides the previous paragraph and shows just the content in the anchored paragraph I just clicked

What I have so far (which really isn't much) is:

                      $('#content p:not("#firstParagph")').toggle();`

I tried to use .filter(':hidden') and show() but it ended up breaking all the code (I'm sure it's because I was doing something wrong though) How I've gotten it to work previously is to replace the css code display:inline but I want to do it without having to change the CSS because all the css is already there

Answer 1

$('.trigger').click(function(e) // Trigger is the common class for all the anchors
{
     $('#content p').hide(); // Hide all the paragraphs initially. This makes all the visible paragraphs to hide
     $('#content p#'+$(this).attr('src')).show(); // Showing the paragraph which ID is matching to the anchor's src attribute
}

Check a sample here .

Answer 2

Are you looking something like this:

HTML:

<div class="intro"> 
  <a href="intro">Intro</a>
  <p>intro</p>
</div>
<div class="first"> 
  <a href="#">1st</a>
  <p>First</p>
</div>
<div class="second">
  <a href="#">2nd</a>
  <p>Second</p>
</div>
<div class="third"> 
  <a href="#">3rd</a>
  <p>third</p>
</div>

Javascript:

$('p').hide();
$('.intro p').show();

$('a').on('click', function (e) {
   e.preventDefault();
   $('p').hide();
   $(this).closest('div').find('p').show();
});

Here is the fiddle: http://jsfiddle.net/SznuP/