title: jQuery swap and hide div content based on click
body: <p>Firstly there are 101 questions similar to this one, however still unable to answer this question.</p>
  
  <p>I am creating a similar interface to youtube, with video thumbnails on the right side and a pain playing pane. </p>
  
  <p>My loop for displaying thumbnail images is as follows:</p>
  
  <pre><code>&lt;?php function getVimeoThumb($id) {
      $data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
      $data = json_decode($data);
      return $data[0]-&gt;thumbnail_medium;
  } ?&gt;
  
  &lt;div id="thumb"&gt;
      &lt;img src="&lt;?php echo getVimeoThumb($id);?&gt;" alt=""&gt;   
      &lt;h4&gt;&lt;?php the_sub_field('child_title'); ?&gt;&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My main feature video is displayed as follows:</p>
  
  <pre><code>&lt;div id="feature"&gt;
      &lt;h4 id="mainTitle"&gt;&lt;?php the_sub_field('video_title'); ?&gt;&lt;/h4&gt;
      &lt;iframe src="https://player.vimeo.com/video/&lt;?php the_sub_field('video_id')?&gt;" width="500" height="282"&gt;&lt;/iframe&gt; 
  &lt;/div&gt; &lt;!-- end of feature Container --&gt;
  </code></pre>
  
  <p>The initial load will be conducted by PHP, however the DOM manipulation should be achieved by javascript. </p>
  
  <p><strong>Questions</strong></p>
  
  <ol>
  <li><p>How can I swap just the ID and text between these two divs. </p></li>
  <li><p>I would also like to hide the thumbnail that has been clicked as it is shown in the feature frame. </p></li>
  </ol>
  
  <p>Many thanks</p>