Here is my site: http://trinityfel.org/podcast/redesign/downloads/index

To see functionality: Click on the "Sermons" tab. Click on the first image (Reality Check) or the link below it.

Basically, how I have it set up is that there is a hidden div w/ "more info" related the image. When the image or the link below it is clicked, the tab pane hides and the hidden info div shows. The problem is that the "Sermons" tab stays highlighted/"active" and so the user is unable to click it to go back to the main info page. I'd like all the tabs to be deselected upon clicking the image/link.

Here's my code:

Code:
<!-- This JavaScript snippet activates those tabs -->
<script>

// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
	
        //when img w/ this class is clicked, show series pane, hide tab pane
	$("img.realitycheck").click(function(){
        $("div.series").show();
        $("div.panes").hide();
    });
    
        //when link w/ this class is clicked, show series pane, hide tab pane
    $("a.realitycheck").click(function(){
        $("div.series").show();
        $("div.panes").hide();
    });
    
        //series pane hidden on load, tab panes show
    $("ul.tabs").click(function(){
        $("div.series").hide();
        $("div.panes").show();
    });
});
</script>