title: How to display different content when different button is clicked in jQuery
body: <p>What I want to achieve is this: when a user clicks on different links, a container with content displays it in the main container. I just want the container to change, while others links hide the contents.</p>
  
  <p>Here is my code:</p>
  
  <pre><code> &lt;!-- This is the container, where it displays --&gt;
  
     &lt;div id="container" style="width:1200px;height:400px;"&gt;
  
      &lt;div class="add hide" &gt;&lt;?php include_once('add_device.php');?&gt;&lt;/div&gt;
      &lt;div class="online hide" style="display:none;"&gt;&lt;?php include_once('online_device.php');?&gt;&lt;/div&gt;
      &lt;div class="offline hide" style="display:none;"&gt;&lt;?php include_once('offline_device.php');?&gt;&lt;/div&gt;
      &lt;div class="tampered hide" style="display:none;"&gt;&lt;/div&gt;
      &lt;div class="speed hide" style="display:none;"&gt;&lt;/div&gt;
      &lt;div class="realtime hide" style="display:none;"&gt;&lt;/div&gt;
      &lt;div class="offgeo hide" style="display:none;"&gt;&lt;/div&gt;
      &lt;div class="ongeo hide" style="display:none;"&gt;&lt;/div&gt;
      &lt;div class="crash hide" style="display:none;"&gt;&lt;/div&gt;
      &lt;div class="stats hide" style="display:none;"&gt;&lt;/div&gt;
  
             &lt;/div&gt;
  
    &lt;!--The javascript functions that control the container div class--&gt;
  
     &lt;script&gt;
      $("#devs a").click( function() {
  $(".hide").hide(); // hide other divs, marked with hide class
  var c = $(this).attr('class').split(' ')[0]; //Get First Class
  $("#container ."+c).show(); //show anything inside content div with    the    class c (marked with a . to represent class)
    });
     &lt;/script&gt;
  
        &lt;!--The links that --&gt;
  
       &lt;ul class="collapse" id="devs"&gt;
  
          &lt;li &gt;&lt;a href="#" class="add" &gt;&lt;i class="icon-plus" &gt;&lt;/i&gt; Add device &lt;/a&gt;&lt;/li&gt; 
        &lt;li &gt;&lt;a href="#" class="online" &gt;&lt;i class="icon-circle-blank"&gt;&lt;/i&gt; Online &lt;/a&gt;&lt;/li&gt;
            &lt;li &gt;&lt;a href="#" class="offline"&gt;&lt;i class="icon-circle"&gt;&lt;/i&gt; Offline &lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  </code></pre>