title: jQuery - How to change BOTH image & text using onClick event?
body: <p>My goal is to create an jQuery event, that when a particular list element has been clicked on, both the persons image and info changes accordingly.</p>
  
  <p>I am new to jQuery and would like to know how to Switch Between Multiple Classes for Two separate Elements (img and p), and have the correct correlating images and text, change (using the same jQuery effects) once a click event has occurred.</p>
  
  <p>I have managed to use the below jQuery to change the images back and fourth as I desire when clicked on, but do not know how to integrate the text/p/corresponding info along with it.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function) {
    $("a").click(function(e) {
        e.preventDefault();
        var newClass = $(this).attr("id");
        var oldClass = $("#full-size-image").attr("class"):
            $("#full-size-image").fadeOut(function() {
                $("#full-size-image").removeClass(oldClass).addClass(newClass).fadeIn("slow");
            });
    });
  });
  </code></pre>
  
  <p>This is the HTML and CSS/SCSS I am using, in the hope that it makes the above code clearer</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="center-row" class="row"&gt;
      &lt;nav class "column-4"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" id="bill"&gt;BILL&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="molly"&gt;MOLLY&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="anna"&gt;ANNA&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="sue"&gt;SUE&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;section class="column-8"&gt;
          &lt;div id="full-size-image" class="bill"&gt;
              &amp;nbsp
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
       &lt;footer class=" column-12 "&gt;
        &lt;p id="text-box " class="bill-info "&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a tristique sapien, eget posuere dolor. Nulla quis leo vitae lorem luctus tempor. Cras vitae sem vel dui dapibus sagittis. Phasellus a odio finibus, ullamcorper dolor non, congue augue. Nullam vitae metus at velit efficitur placerat. Duis a pharetra velit, a faucibus ipsum. Ut malesuada ligula sed dui tempus, vel dapibus mi gravida.
        &lt;/p&gt;
       &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>  </p>
  
  <pre><code>section #full-size-image {
      background-size: 100%;
      border: 2px solid black;
  }
  
  section .bill {
      background: url('../images/bill.png') no-repeat;
  }
  
  section .molly {
      background: url('../images/molly.png') no-repeat;
  }
  
  section .anna {
      background: url('../images/anna.png') no-repeat;
  }
  
  section .sue {
      background: url('../images/sue.png') no-repeat;
  }
  </code></pre>