Selector Code with image

Select menu item and show content and image

by Susan Delgado

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
      <div>
        <table class="selector">
          <tbody>
            <tr>
            <td valign="top"><img class="nosize PostImage" src="http://lorempixel.com/200/280/" alt="Fellows"> </td>
              <td valign="top">
                <ul class="menu-selector nav __web-inspector-hide-shortcut__">
                  <li class=""><a href="#p1" data-toggle="tab" data-postimg="http://lorempixel.com/200/280/" aria-expanded="false">Lorem</a></li>
                  <li class=""><a href="#p2" data-toggle="tab" data-postimg="http://lorempixel.com/200/390/" aria-expanded="false">Lorem</a></li>
                  <li class=""><a href="#p3" data-toggle="tab" data-postimg="http://lorempixel.com/200/400/" aria-expanded="false">Lorem</a></li>
                  <li class=""><a href="#p4" data-toggle="tab" data-postimg="http://lorempixel.com/200/180/" aria-expanded="false">Lorem</a></li>
                  <li class=""><a href="#p5" data-toggle="tab" data-postimg="http://lorempixel.com/200/220/" aria-expanded="false">Specialty Designs</a></li>
                  <li class="active"><a href="#p6" data-toggle="tab" data-postimg="http://lorempixel.com/200/280/" aria-expanded="true">Lorem </a></li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>

      </div>

    </div>
    <div class="col-md-3 col-sm-3 col-xs-3">
      <div class="tab-content">
        <div id="p1" class="tab-pane fade">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...

JavaScript

$('.menu-selector a').click(function(event) {
    /* Act on the event */
    if ($('.data-postImg')) {
      var postImage = $(this).attr('data-postImg');
      $('.PostImage').attr('src', postImage);
    }
  });