show element based on class

I have html like this

 <h2 class="Comprehensive Leadership">Comprehensive Leadership</h2><a href="/topic/comprehensiveleadership">View all Comprehensive Leadership Programs </a>
 <br><a href="/programs/pld/Pages/default.aspx" class="Comprehensive Leadership">Program for Leadership Development &gt;</a><br>Dec 2011–Jun 2012<br><a href="/programs/gmp/Pages/default.aspx" class="Comprehensive Leadership">General Management Program &gt;</a><br>Jan–May 2012<br>


<h2 class="Corporate Governance">Corporate Governance</h2><a href="/topic/corporategovernance">
View all Corporate Governance Programs </a><br><a href="/programs/ac/Pages/default.aspx" class="Corporate Governance">Audit Committees in a New Era of Governance &gt;</a><br>Nov 13–15, 2011<br><a href="/programs/cc/Pages/default.aspx" class="Corporate Governance">Compensation Committees &gt;</a><br>Nov 16–18, 2011<br>

<div class="tabbed-content"><ul class="tabs"><li><ul><li><a开发者_开发技巧 href="#" class="Comprehensive Leadership">Comprehensive Leadership</a></li><li><a href="#" class="Corporate Governance">Corporate Governance</a></li><div>

If I click Comprehensive Leadership it should only display first h2 tag by matching the class till next h2 tag, that is :

<h2 class="Comprehensive Leadership">Comprehensive Leadership</h2><a href="/topic/comprehensiveleadership">View all Comprehensive Leadership Programs </a>
 <br><a href="/programs/pld/Pages/default.aspx" class="Comprehensive Leadership">Program for Leadership Development &gt;</a><br>Dec 2011–Jun 2012<br><a href="/programs/gmp/Pages/default.aspx" class="Comprehensive Leadership">General Management Program &gt;</a><br>Jan–May 2012<br>

I can change the html little bit...i have also paste it here : http://jsfiddle.net/sMCsw/10/

A better solution would be not to select by class, but by the actual value of the H2 using this:

function showByText(text){
    $("h2:contains('" + text + "')").show();
    // added a return false to prevent the a href from actually executing
    return false;
}
<a href="/programs/pld/Pages/default.aspx" onclick="return showByText(this.text();">Comprehensive Leadership</a>

The way your html is structured does not lend itself to solving this problem easily. I don't think its even worth taking the time trying to figure it out with your current html structure without first knowing whether you can modify it. If you can modify it then this is a very easy problem.

Right now you have structure like so:

<h2>Topic</h2>
... a bunch of content....
<h2>Topic2</h2>
... a bunch of content....

You are asking for a link that hides everything EXCEPT the clicked topic. But you have no containers to define your content. You need to contain your content blocks so that you can hide/show them.

<div class="mytopic">
<h2>Topic</h2>
   ... a bunch of content....
</div>
<div class="mytopic2">
<h2>Topic2</h2>
   ... a bunch of content....
</div>

Then you can construct a jQuery constructor to hide everything except for the wanted content. As someone in the comment already pointed out - the class Comprehensive Leadership is illegal the way you are using it. Fix that too.

$('div').not('.mytopic').hide();

On rereading this I think that you may actually want to show the content, not hide it. Hard to tell as your posted code is incomplete and you provided no CSS. Anyways, if you are looking to show then this jQuery line would work instead.

$('div.mytopic').show();