CodePen

HTML

            
              <ul class="au-img">
  <li><img src="http://goo.gl/BvCy7" id="andrew" alt="Andrew"/></li>
  <li><img src="http://goo.gl/abTYj" id="john" alt="John"/></li>
  <li><img src="http://goo.gl/qXyUY" id="nate" alt="Nate"/></li>
</ul>

<div class="default-text">Click on the picture for description.</div>

<div class="about-andrew hide">
  <h3>Andrew</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cumque minima vitae ab facilis dicta aut mollitia quasi possimus quidem?Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati! Aliquam totam praesentium aspernatur modi accusantium minus sequi harum rem aperiam!</p>
</div>
<div class="about-john hide">
  <h3>John</h3>
  <p>Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati! Aliquam totam praesentium aspernatur modi accusantium minus sequi harum rem aperiam!Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati! Aliquam totam praesentium aspernatur modi accusantium minus sequi harum rem aperiam!</p>
</div>
<div class="about-nate hide">
  <h3>Nate</h3>
  <p>Ipsa libero nostrum labore esse quasi doloremque possimus officiis accusamus id praesentium vitae omnis modi dicta perferendis incidunt enim nam!Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati! Aliquam totam praesentium aspernatur modi accusantium minus sequi harum rem aperiam!</p>
</div>
            
          
!
via HTML Inspector

CSS

            
              * { margin:0;padding:0; }
body { background:#E9EEF5; }

ul {
  list-style-type:none;
  height:202px;
  width:674px;
  margin:10px auto 0;
}

li {
  height:200px;
  width:200px;
  margin:0 10px;
  border:1px solid #222;
  display:inline-block;
}

img {
  cursor: pointer;
}

.default-text {
  font:20pt 'Georgia';
  height:50px;
  width:674px;
  margin:20px auto 0;
  text-align:center;
}

div {
  margin:20px auto 0;
  text-align:center;
  width: 674px;
}

h3 {
  font-size: 2em;
  margin-bottom: 20px;
}

.hide {
  display: none;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.au-img img').on("click", function(e) {
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.about-' + $id).attr('class').replace('hide', '');
  
  $('.default-text').addClass('hide');
  $('.about-' + $id).removeClass('hide');
  $('div[class*=about]').not($class).addClass('hide');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................