JSFiddle - React, Tailwind, and code Playground

by Shubham Agrawal

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <ul>
        <li class="1"><img src="http://www.planwallpaper.com/static/images/abstract-colourful-cool-wallpapers-55ec7905a6a4f.jpg" class="img-responsive"></li>
        <li class="2"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRfs21_S1c5l_qDHy9PEyrlXLh75CChSVTpu3B3JjoV5kdQ_XXj" class="img-responsive"></li>
        <li class="3"><img src="https://s-media-cache-ak0.pinimg.com/originals/ef/9c/22/ef9c22cd9f1030edb2b21883b5fbe0d8.jpg" class="img-responsive"></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 mainImage">
      <img src="http://www.planwallpaper.com/static/images/abstract-colourful-cool-wallpapers-55ec7905a6a4f.jpg" class="img-responsive" />
    </div>
    <div class="col-xs-6 mainDescription">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius convallis elit non mollis. In pharetra orci eget mollis commodo
      </p>
    </div>
  </div>
</div>
<br />
<br />
<div id="desc1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius convallis elit non mollis. In pharetra orci eget mollis commodo</p>
</div>
<div id="desc1Image">
  <img alt="Image1" src="http://www.planwallpaper.com/static/images/abstract-colourful-cool-wallpapers-55ec7905a6a4f.jpg" width="100%" /></div>
<div id="desc2">
  <p>
    Description 2</p>
</div>
<div id="desc2Image">
  <img alt="Image2" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRfs21_S1c5l_qDHy9PEyrlXLh75CChSVTpu3B3JjoV5kdQ_XXj" width="100%" /></div>
<div id="desc3">
  <p>
    Description 3</p>
</div>
<div id="desc3Image">
  <img alt="Image3" src="https://s-media-cache-ak0.pinimg.com/originals/ef/9c/22/ef9c22cd9f1030edb2b21883b5fbe0d8.jpg" width="100%" /></div>

<div class="container container1">
  <div class="row">
    <div class="col-xs-12">
      <ul>
        <li class="4"><img...

CSS

* {
  box-sizing: border-box;
}

body {
  width: 500px;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 500px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-xs-6 {
  position: relative;
  min-height: 1px;
  width: 50%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.col-xs-12 {
  position: relative;
  min-height: 1px;
  width: 100%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style-type: none;
  cursor: pointer;
}

ul li {
  display: inline-block;
  width: 100px;
}

#desc1,
#desc2,
#desc3,
#desc12,
#desc22,
#desc32 {
  display: none;
}

#desc1Image,
#desc2Image,
#desc3Image,
#desc1Image2,
#desc2Image2,
#desc3Image2 {
  display: none;
}

JavaScript

$(document).ready(function() {

  $('.1,.2,.3').click(function() {
    var myVar = $(this).attr("class");
    $('.mainDescription').fadeOut(400, function() {
      $('.mainDescription').html($('#desc' + myVar).html()).fadeIn(200);
    });
    $('.mainImage').fadeOut(400, function() {
      $('.mainImage').html($('#desc' + myVar + 'Image').html()).fadeIn(200);
    });
  })

  $('.4').click(function() {
    $('.mainDescription2').fadeOut(400, function() {
      $('.mainDescription2').html($('#desc12').html()).fadeIn(200);
    });
    $('.mainImage2').fadeOut(400, function() {
      $('.mainImage2').html($('#desc1Image2').html()).fadeIn(200);
    });
  })
  $('.5').click(function() {
    $('.mainDescription2').fadeOut(400, function() {
      $('.mainDescription2').html($('#desc22').html()).fadeIn(200);
    });
    $('.mainImage2').fadeOut(400, function() {
      $('.mainImage2').html($('#desc2Image2').html()).fadeIn(200);
    });
  })
  $('.6').click(function() {
    $('.mainDescription2').fadeOut(400, function() {
      $('.mainDescription2').html($('#desc32').html()).fadeIn(200);
    });
    $('.mainImage2').fadeOut(400, function() {
      $('.mainImage2').html($('#desc3Image2').html()).fadeIn(200);
    });
  })
});