title: Struggling with jquery Show (), hide() and toggle()
body: <p>am building some functionality/website that I could use some help. I got it working how I need it to, but I figure that it's really crude so any help making it cleaner is appreciated. </p>
  
  <p>Here is the HTML. </p>
  
  <pre><code>     &lt;div class="large-5 columns"&gt;
            &lt;div id="t1" class="t1"&gt;
              &lt;h3&gt;
                &lt;a href="#"&gt;
                  Link one
                &lt;/a&gt;
              &lt;/h3&gt;
              &lt;p id="r1"&gt;
                Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              &lt;/p&gt;
            &lt;/div&gt;
   &lt;div id="t2" class="t2"&gt;
              &lt;h3&gt;
                &lt;a href="#"&gt;
                  Link two
                &lt;/a&gt;
              &lt;/h3&gt;
              &lt;p id="r2"&gt;
                Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt; &lt;div id="imageone" style="display:none"&gt;
  </code></pre>
  
  <p>first image in tab
  </p>
  
  <p>and Here is the Jquery:
  I'll have more tabs but just kept it like this for now. </p>
  
  <pre><code> &lt;script&gt;
  $( "#t1 a" ).click(function() {
  $( "#r1" ).toggle()
  $( "#r2" ).hide()
  $( "#imageone" ).show()
  });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>here is a JSFIDDLE, it works how I need it to work, but I feel like it's really crude in terms of my Javascript, can anyone help me re-write this to be simpler code?
  <a href="http://jsfiddle.net/2jbf9cx0/" rel="nofollow">http://jsfiddle.net/2jbf9cx0/</a></p>