jquery not changing class to invisible on click function
<p>I have a section of my webpage that will either display the company's stock quote, a historical chart or the latest press releases. The aspx mark up is show below with some removed for brevity.</p>

<pre><code>&lt;div id="StockQuote" class="invisible"&gt;
        &lt;asp:UpdatePanel ID="updplStockQuote" runat="server"&gt;
            &lt;ContentTemplate&gt;                  
                &lt;span class="stockpricefont"&gt;&lt;i&gt;Last Sale:&lt;/i&gt;&lt;b id="lastsale" runat="server"&gt;&lt;/b&gt;&lt;/span&gt;
                     &amp;nbsp;&lt;asp:Image ID="imgNetChangeArrow" runat="server" /&gt;&lt;span class="otherstockinfofont"&gt;&lt;b id="netchange" runat="server"&gt;&lt;/b&gt;&lt;/span&gt;
                            &lt;span class="stockpricefont"&gt;&lt;i&gt;Market Cap:&lt;/i&gt;&lt;/span&gt;&lt;span class="otherstockinfofont"&gt;&lt;b id="marketcap" runat="server"&gt;&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
                &lt;span class="otherstockinfofont2"&gt;&lt;i&gt;Net Change(%):&lt;/i&gt;&amp;nbsp;&lt;asp:Image ID="imgNetChgPctArrow" runat="server" /&gt; &lt;b id="netchangepct" runat="server"&gt; &lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
                &lt;span class="otherstockinfofont2"&gt;&lt;i&gt;Open:&lt;/i&gt;&lt;b id="priceopen" runat="server"&gt;&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
                &lt;span class="otherstockinfofont2"&gt;&lt;i&gt;High:&lt;/i&gt;&lt;b id="pricehigh" runat="server"&gt;&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
                &lt;span class="otherstockinfofont2"&gt;&lt;i&gt;Low:&lt;/i&gt;&lt;b id="pricelow" runat="server"&gt;&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
                &lt;span class="otherstockinfofont2"&gt;&lt;i&gt;Volume:&lt;/i&gt;&lt;b id="pricevolume" runat="server"&gt;&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;
                &lt;span class="otherstockinfofont2"&gt;&lt;i&gt;Prior Close:&lt;/i&gt;&lt;b id="pricepriorclose" runat="server"&gt;&lt;/b&gt;&lt;/span&gt;&lt;br /&gt;


            &lt;/ContentTemplate&gt;
            &lt;Triggers&gt;
               &lt;%-- &lt;asp:AsyncPostBackTrigger/&gt;--%&gt;
            &lt;/Triggers&gt;
        &lt;/asp:UpdatePanel&gt;
    &lt;/div&gt;

    &lt;div id="StockChart" class="visible"&gt;
        &lt;asp:UpdatePanel ID="updpnlStockChart" runat="server"&gt;
            &lt;ContentTemplate&gt;
                &lt;%-- All the asp chart code is here--%&gt;
            &lt;/ContentTemplate&gt;
            &lt;Triggers&gt;
                &lt;asp:AsyncPostBackTrigger ControlID="ddlChartTimeFrame" EventName="SelectedIndexChanged"/&gt;
            &lt;/Triggers&gt;
        &lt;/asp:UpdatePanel&gt;
    &lt;/div&gt;
</code></pre>

<p>Here is the script</p>

<pre><code> &lt;script&gt;
    $(function () {
        function aTagClick(event) {
            if ($(this).text() === "Stock Quote") {
                if ($('#StockQuote').hasClass('invisible')) {
                    $('#StockChart').toggleClass('invisible');
                    $('#StockQuote').toggleClass('visible');           

                } 
            } else if ($(this).text() === "Stock Chart") {
                if ($('#StockChart').hasClass('invisible')) {
                    $('#StockChart').toggleClass('visible');
                    $('#StockQuote').toggleClass('invisible');
                }
            }}           
        $('#a_stockqoute').click(aTagClick);
        $('#a_stockchart').click(aTagClick);
        $('#a_latestnews').click(aTagClick);
    });
</code></pre>

<p></p>

<p>Here is the CSS</p>

<p>.invisible
{
    display: none;
}
.visible {
    display: block;
}</p>

<p>The page opens with the chart visible. If I click on the stock quote tag, the quote displays but the chart div does not become invisible as it should. What am I missing? Clicking on the stock Chart tag will now make the chart disappear. I am somewhat new to jquery but cannot figure out why this is behaving this way</p>

<p>Working script</p>

<pre><code> function aTagClick(event) {
            if ($(this).text() === "Stock Quote") {
                if ($('#StockQuote').css('display') == 'none') {
                    $('#StockChart').hide();
                    $('#StockQuote').show();
                }
            } else if ($(this).text() === "Stock Chart") {
                if ($('#StockChart').css('display') == 'none') {
                    $('#StockChart').show();
                    $('#StockQuote').hide();
                }
            }}
</code></pre>
