title: Show/Hide span on the same spot
body: <p>I am using jQuery to show or hide a span. But I want the <code>&lt;div&gt;</code> to appear in the same place as the link I click. The current code actually shows the <code>&lt;div&gt;</code> tags on the left side of the screen. Here is the code i am using. </p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $(".slidingDiv").hide();
      $(".show_hide").show();
      $('.show_hide').click(function(){
      $(".slidingDiv").slideToggle();
        return false;
      });
      $(".slidingDiv1").hide();
      $(".show_hide1").show();
      $('.show_hide1').click(function(){
      $(".slidingDiv1").slideToggle();
        return false;
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Span Tag:</p>
  
  <pre><code>&lt;span&gt;
   &lt;a href="#" class="show_hide"&gt;Japan&lt;/a&gt;
   &lt;span class="slidingDiv"&gt;
     &lt;img src="02-1 ImageFiles/01 Japan.JPG" style="width:235px; height:245px;"&gt;
     &lt;a href="#" class="show_hide"&gt;Close&lt;/a&gt;
   &lt;/span&gt;
   is made up of islands, regions, prefectures (government districts), cities, and surrounding communities. The main island, Honshu, has thirty-four prefectures making up five regions. The 
   &lt;a class="show_hide1" href="#"&gt;Tōhoku Region&lt;/a&gt;
   &lt;span class="slidingDiv1"&gt;
    &lt;img src="02-1 ImageFiles/02 TohokuRegion.JPG" style="width:217px; height:236px;"&gt;
    &lt;a href="#" class="show_hide1"&gt;Close&lt;/a&gt;
  &lt;/span&gt;
  </code></pre>