title: Using jquery to swap text, how to revert other text to original?
body: <p>So I have a bit of jquery that I am using to swap "View Bio" for "Hide Bio" and vice versa for multiple profiles. Works great, only I'm not sure how to make it so that when you click a different profile's "View Bio" while one's "Hide Bio" is active, the other profile's "Hide Bio"s reverts back to the original "View Bio".</p>
  
  <p>Basically, I want to only have one saying "Hide Bio" at all times (making it the only active bio).
  Also I want it so I can still click the one that currently says "Hide Bio" to make it say "View Bio" (i.e. All profiles say "View Bio")</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/pauljackson/2zn4X/" rel="nofollow">http://jsfiddle.net/pauljackson/2zn4X/</a></p>
  
  <p>(EDIT - updated fiddle with solution implemented: <a href="http://jsfiddle.net/pauljackson/2zn4X/2/" rel="nofollow">http://jsfiddle.net/pauljackson/2zn4X/2/</a>)</p>
  
  <p>js:</p>
  
  <pre><code>$(document).ready(function () {
     $(".viewbio").click(function() {
          var $self = $(this);
          if ($self.text().trim() == "VIEW BIO")
          $self.text("HIDE BIO");
          else
          $self.text("VIEW BIO");
      });
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="ourteamslide"&gt;
  &lt;div class="maincontent"&gt;
  &lt;div class="ourteamlist"&gt;
              &lt;ul&gt;
                  &lt;li&gt;                        
                      &lt;img src="http://eldoradospringsmo.com/pages/wp-content/uploads/2014/07/wpid-WP_IM_1404400872566__0.jpg" class="profilepic" alt="Profile Pic"&gt;
                      &lt;div class="lilbluebox"&gt;
                          &lt;div class="teambox"&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;
                                      &lt;p class="whitetext"&gt;Some Dude&lt;/p&gt;
  
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;div class="viewbio"&gt;VIEW BIO&lt;/div&gt;
                                                                          &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;                        
                      &lt;img src="http://eldoradospringsmo.com/pages/wp-content/uploads/2014/03/wpid-WP_IM_1395933210796__1.jpg" class="profilepic" alt="Profile Pic"&gt;
                      &lt;div class="lilbluebox"&gt;
                          &lt;div class="teambox"&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;
                                      &lt;p class="whitetext"&gt;Some Gal&lt;/p&gt;
  
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;div class="viewbio"&gt;VIEW BIO&lt;/div&gt;                             
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;                        
                      &lt;img src="http://ind.ccio.co/I/g5/U9/4ea7744cfd95a0b491203004e516808f.jpg?iw=300" class="profilepic" alt="Profile Pic"&gt;
                      &lt;div class="lilbluebox"&gt;
                          &lt;div class="teambox"&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;
                                      &lt;p class="whitetext"&gt;Some Old Man&lt;/p&gt;
  
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;div class="viewbio"&gt;VIEW BIO&lt;/div&gt;
                                                                          &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size:12px;
  width:100%;
  height:100%;
  }
  .maincontent{
  max-width:1240px;
  height:100%;
  margin:0 auto;
  padding-right:30px;
  }
  #ourteamslide{
  height:auto;
  background-color:#eeeeee;
  padding-top:80px;
  }
  .whitetext{
  color:#000000;
  width:200px;
  }
  .ourteamlist{
  max-width:1200px;
  height:1000px;
  padding-left:30px;
  padding-right:10px;
  background-color:#eeeeee;
  text-align:center;
  margin:0 auto;
  margin-left:-1px;
  clear:both;
  }
  .ourteamlist ul li{
  display:inline-block;
  margin-right:-3px;
  text-align:left;
  margin-top:1px;
  }
  .profilepic{
  height:205px;
  width:299px;
  padding-left:0px;
  padding-right:1px;
  padding-bottom:1px;
  }
  .lilbluebox{
  background-color:#FFFFFF;
  margin-top:-5px;
  width:299px;
  height:80px;
  }
  .teambox{
  padding-left:30px;
  padding-top:20px;
  width:100%;
  }
  .teambox ul li{
  display:inline-block;
  }
  .viewbio{
  font-size:11px;
  font-weight:600;
  text-align:right;
  margin-right:30px;
  color:#888888;
  cursor:pointer;
  }
  .biobox{
  display:block;
  background-color:#1E2129;
  color:#FFFFFF;
  padding-left:30px;
  padding-top:20px;
  padding-right:30px;
  max-width:600px;
  }
  .teambox ul li a{
  text-decoration: none;
  </code></pre>
  
  <p>Thank you for your help!</p>