$("#images").on("click", "li", function() {
    $("#images").find(".active").removeClass("active");
    $(this).addClass("active");
    $("#descriptions li").hide();
    console.log("[data-ref=" + $(this).data("description") + "]");
    $("#descriptions").find("[data-ref=" + $(this).data("description") + "]").show();

});

Setting Validate Copy Format

.descriptions li {
  display: none;
}
.descriptions li:first-child {
  display: block;
}
.thumbnails a {
  text-decoration: none;
}
.thumbnails .active a {
  text-decoration: underline;
}
.thumbnails li {
  list-style: none }
.thumbnails li.active {
  list-style: disc;
}

Setting Validate Copy Format

<ul id="images" class="thumbnails">
  <li class="active" data-description="img1"><a href="#">img1</a></li>
  <li data-description="img2"><a href="#">img2</a></li>
  <li data-description="img3"><a href="#">img3</a></li>
  <li data-description="img4"><a href="#">img4</a></li>
  <li data-description="img5"><a href="#">img5</a></li>
</ul>
<ul id="descriptions" class="descriptions">
  <li data-ref="img1">img1 text text text text text text text text text</li>
  <li data-ref="img2">img2 text text text text text text text text text</li>
  <li data-ref="img3">img3 text text text text text text text text text</li>
  <li data-ref="img4">img4 text text text text text text text text text</li>
  <li data-ref="img5">img5 text text text text text text text text text</li>
</ul>

Copy Format

Download