Show / hide with multiple words in text link
I'm using the show/hide functionality in jquery, html and jquery code below.
The problem is when I add more than one word in the link text, the code doesn't work.
Shortened html:
<!-- module d -->
<div class="module-single">
<div class="module d" id="FOOTBALL">
<div class="FOOTBALL selection">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="BASKETBALL SECOND" style="display: none;">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="switch_links">
<p>Recruiting:
<span class="basketball"><a href="">BASKETBALL SECOND</a></span>
<span class="slash">/</span><span class="football selected">
<a href="#">FOOTBALL</a></span>
</p>
</div>
</div>
</div>
Javascript:
$('.d .switch_links a').click(function() {
$('.d .selection').hide().removeClass('selection');
$('.d .'+$(this).text()).show().addClass('selection');
$('.d .selected').removeClass('selected');
$(this).parent().addClass('selected');
return false;
});
How can I add multiple words with spaces in "<span class="basketball"><a href="">BASKETBALL SECOND</a></span>" and still have the div show properly.
Thanks!