[jQuery] Changing Class using Jquery

[WebNot]

Kindly help!!!

I am in a situation where I have to develop a news website, and my
client wants me to display three stories from each category rest all
should be hidden by default and when a user wants to view more stories
he can click "add a story" the next story with class blocked should
get visible. Same when a user clicks on "remove a story", the list
item with no class should get changed to class "blocked"


Basically i have seen this on BBC's website homepage. I will be
thankful if anyone helps me out.
All I know is that it is possible through jquery and jquery is a new
thing to me.


<div class="gkMod" id="NewsBox">
<h2><a href="#">News</a></h2>
<div class="gkSet">
<div class="gkData">
<h3><a href="/Categories/?Show=1">Frontpage</a></h3>
<p class="addremove">
<a href="#" class="add"><span class="hide">Add a Story</span>
</a> &#160; <a class="remove" href="#"><span class="hide">Remove a
story </span></a></p>
<ul class="c1">
<li><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=46&cat=1" >'Knee-jerk
reaction will shatter peace'</a>
</p></li>
<li ><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=45&cat=1" >Mir sits pretty
on home turf</a>
</p></li>
<li ><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=44&cat=1" >Kupwara
&#8216;under-age voting&#8217; to be probed</a>
</p></li>
<li><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=43&cat=1"
>Candidate&#8217;s house attacked</a>
</p></li>
<li class="blocked"><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=42&cat=1" >AIDS bomb
ticking in Kashmir</a>
</p></li>
<li class="blocked"><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=41&cat=1" >Aunt and nephew
in Chadoora</a>
</p></li>
<li class="blocked"><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=40&cat=1" >Zardari for pact
</a>
</p></li>
<li class="blocked"><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=40&cat=1" > Win win
suspects</a>
</p></li>

</ul></div>

<div class="gkData">
<h3><a href="/Categories/?Show=2">News</a></h3>

<p class="addremove">
<a href="#" class="add"><span class="hide">Add a Story</span>
</a>&#160; <a class="remove" href="#"><span class="hide">Remove a
story</span></a></p>
<ul class="c21">
<li><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=39&cat=21" >Bar&#8217;s
legal notice to CS on detainee</a>
</p></li>
<li><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=38&cat=21" >&#8216;Govt
indifferent towards physically challenged&#8217;</a>
</p></li>
<li><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=37&cat=21" >16 injured in
NC-Pgk clashes</a>
</p></li>
<li class="blocked"><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=36&cat=21" >111 candidates
to contest in Chenab valley</a>
</p></li>
<li class="blocked"><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=35&cat=21" >Bar expels 4
members</a>
</p></li>
<li class="blocked"><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=34&cat=21" >Kara to contest
from Batamaloo</a>
</p></li>
<li class="blocked"><p>
<a href="/fullstory/?Date=2_12_2008&ItemID=33&cat=21" >Khan booked
under PSA</a>

</p></li>
</ul></div>
</div></div>