title: Can I toggle the visibility of a tab based on its title?
body: <p>This is a similar question to the one here: <a href="https://stackoverflow.com/questions/16775435/why-are-my-cookie-settings-not-being-applied">Why are my cookie settings not being applied?</a></p>
  
  <p>I know this is kludgy, but I haven't found another way to accomplish this - I want to read a cookie, and based on the cookie val (either "true" or "false") toggle a tab's visibility on or off, using a combination of Razor/C#, HTML, and jQuery.</p>
  
  <p>What I've come up with is to base the div's "title" property on that, with Razor code, and then, in jQuery, read that property val to set the visibility val, something like this:</p>
  
  <p>Razor:</p>
  
  <pre><code>string selectTwitterCookie = Request.Cookies["selectTwitter"].Value;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="duckbilledPlatypusTab-Twitter" title=@selectTwitterCookie&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>if ($("#duckbilledPlatypusTab-Twitter").title == "true") {
      $("#duckbilledPlatypusTab-Twitter").visible("visible");
  } else {
      $("#duckbilledPlatypusTab-Twitter").visible("not visible");
  }
  </code></pre>
  
  <p>...of course, "not visible" is not what I really need. I would rather code it more directly, such as something like this:</p>
  
  <pre><code>($("#duckbilledPlatypusTab-Twitter").title == "true") ?  $("#duckbilledPlatypusTab-Twitter").visible("visible") : $("#duckbilledPlatypusTab-Twitter").visible("invisible");
  </code></pre>
  
  <p>Does anybody know how to accomplish this?</p>
  
  <h2>UPDATE</h2>
  
  <p>Okay, another odd situation. Looking at values in CDT, I see that all of the tabs have the same class ("ui-tabs-anchor"):</p>
  
  <pre><code>&lt;a href="#duckbilledPlatypusTab-Twitter" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1"&gt;Twitterpated&lt;/a&gt;
  &lt;a href="#duckbilledPlatypusTab-Bing" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3"&gt;Bingo&lt;/a&gt;
  </code></pre>
  
  <p>...so they don't seem to have their html affected by the class="display-@WhateverCookie" that I added in code:</p>
  
  <pre><code>&lt;div id="duckbilledPlatypusTab-Twitter" class="display-@TwitterCookie"&gt;
  </code></pre>
  
  <p>...yet, those with that class added won't display anything in their iframe - except Twitter; Twitter works fine... so, it's back to the coding board*, although sometimes it feels more like a Ouija board or a draft board.</p>
  
  <ul>
  <li>Sung to the melody of "Back to the Barrooms" by Merle Haggard.</li>
  </ul>
  
  <h2>UPDATE 2</h2>
  
  <p>Changing it to this allows the iframe to work again:</p>
  
  <pre><code>class="display-"+@BingCookie
  </code></pre>
  
  <p>(instead of class="display-@BingCookie")</p>
  
  <p>But it's interesting - CDT still doesn't seem to be aware of the on-the-fly created class.</p>
  
  <h2>UPDATE 3</h2>
  
  <p>Bizarre...even after adding a title to the html:</p>
  
  <pre><code>&lt;div id="duckbilledPlatypusTab-BingSearch" style="min-height: 50vh" title="Bla" class="display-"+@BingCookie&gt;
  </code></pre>
  
  <p>...and this to the end of the jQuery ready method:</p>
  
  <pre><code>if ($("#duckbilledPlatypusTab-Bing").attr('title') == "true") {
      $("#duckbilledPlatypusTab-Bing").css('display', 'block');
  } else {
      $("#duckbilledPlatypusTab-Bing").css('display', 'none');
  }
  </code></pre>
  
  <p>...the tab remains visible.</p>
  
  <p>CDT sees the element as:</p>
  
  <pre><code>&lt;div id="dynaMashTab-Bingo" style="min-height: 50vh;" title="bla" class="display- ui-tabs-panel ui-widget-content ui-corner-bottom" +@bingocookie="" aria-labelledby="ui-id-4" role="tabpanel" aria-expanded="true" aria-hidden="false"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>IOW, the "class" declaration looks completely wacky...</p>