title: how to hide all other tabs except first tab in jquery when using ajax
body: <p>I am making a web app in Eclipse, using JSP, CSS, JQUERY(jquery-1.10.2.js) and AJAX. I have made a tab effect using HTML(actually JSP) and CSS.
  I have 2 JSP files: </p>
  
  <ul>
  <li><p>1st JSP (named: <code>home.jsp</code>) file has only 1 button which will load the content of second JSP file using AJAX      (Jquery load() method).</p></li>
  <li><p>2nd JSP (named: <code>second.jsp</code>) file has actual HTML for tab effect.</p></li>
  </ul>
  
  <p>Problem is I am unable to show the first tab and hide rest of others. Whats happening is that all the panels(divs) to which the tabs are linked are shown one after the other.</p>
  
  <p>I also want to tell, that problem is fixed when I click any one of them(tabs)..i.e when I click any 1 tab rest of others get hide.</p>
  
  <p>But what i want is that when my <code>second.jsp</code> file is loaded using <code>ajax</code>, I got to see only first tab panel not other by default.</p>
  
  <p>Actually, I am unable to post images due to my low reputation..but to have a clear view of my problem you can watch the video at YOUTUBE at <a href="https://www.youtube.com/watch?v=useXgTzEAZg" rel="nofollow">https://www.youtube.com/watch?v=useXgTzEAZg</a></p>
  
  <p>Following is the file wise code:</p>
  
  <h2><code>home.jsp</code></h2>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;style type="text/css"&gt;
  #homeDiv {
      width: 1000px;
      height: 1000px:
  }
  &lt;/style&gt;
  &lt;link href="css/styles.css" rel="stylesheet" type="text/css"&gt;
  &lt;script src="js/jquery-1.10.2.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jkl.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('#but').click(function() {
              $('#homeDiv').load('folder2/second.jsp #main');
              return false;
          });
      });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button id="but"&gt;press&lt;/button&gt;
      &lt;br&gt;
      &lt;div id="homeDiv"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2><code>second.jsp</code></h2>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;News Headlines&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;...&lt;/div&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="content"&gt;
              &lt;div id="main"&gt;
                  &lt;script src="js/jkl.js" type="text/javascript"&gt;&lt;/script&gt;
                  &lt;h1&gt;Tabbed Panels&lt;/h1&gt;
                  &lt;div class="tabbedPanels" id="tabbed1"&gt;
  
                      &lt;ul class="tabs"&gt;
                          &lt;li&gt;&lt;a href="#panel1" tabindex="1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#panel2" tabindex="2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#panel3" tabindex="3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="panelContainer"&gt;
                          &lt;div id="panel1" class="panel"&gt;
                              &lt;h2&gt;Panel 1 content&lt;/h2&gt;
                              &lt;p&gt;Apples&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div id="panel2" class="panel"&gt;
                              &lt;h2&gt;Panel 2 content&lt;/h2&gt;
                              &lt;p&gt;Mango&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div id="panel3" class="panel"&gt;
                              &lt;h2&gt;Panel 3 content&lt;/h2&gt;
                              &lt;p&gt;Potato&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2><code>jkl.js (JavaScript file)</code></h2>
  
  <pre><code>$(document).ready(function() {
      //alert('outside');
      //$('.tabs a').bind('click focus',function() {
          $(document).on('click', '.tabs a', function()
                  {
          var $this = $(this);
          //alert('?????');
          // hide panels
          $this.parents('.tabbedPanels')
              .find('.panel').hide().end()
              .find('.active').removeClass('active');
  
          // add active state to new tab
          $this.addClass('active').blur();    
  
          // retrieve href from link (is id of panel to display)
          var panel = $this.attr('href');
          // show panel
          $(panel).show();
          // don't follow link
          return false;
      }); // end click
  
      $('.tabs').find('li:first a').click();
  }); // end ready
  </code></pre>
  
  <h2><code>styles.css</code></h2>
  
  <pre><code>.tabbedPanels {
      width: 70%;
      float: left;
      margin-right: 10px; 
  }
  .tabs {
      margin: 20;
      padding: 20;    
      zoom : 1;
  }
  .tabs li {
      float: left;
      list-style: none;
      padding: 0;
      margin: 0;
      -webkit-border-top-left-radius:8px;
  -webkit-border-top-right-radius:8px;
  -moz-border-radius-topleft:8px;
  -moz-border-radius-topright:8px;
  }
  .tabs a {
  
  
      display: block;
      text-decoration: none;
      padding: 3px 5px;
      /* background-color: red;; */
      margin-right: 1px;
      border: 2px solid rgb(100,20,135);
      margin-bottom: -2px;
      width: 60px;
      -webkit-border-top-left-radius:8px;
  -webkit-border-top-right-radius:8px;
  -moz-border-radius-topleft:8px;
  -moz-border-radius-topright:8px;
  
  }
  .tabs .active {
      border-bottom: 1px solid white;
      background-color: white;
      color: red;
      position: relative;
  }
  
  .panelContainer {
      clear: both;
      margin-bottom: 25px;    
      border: 1px solid red;  
      background-color: white;
      padding: 10px;
  }
  
  .panel h2 {
      color: red;
      text-shadow: none;      
  }
  .panel p {
      color: black;   
  }
  </code></pre>