JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div style="width:10%" class="wrapper">
<a href="#">Link 1</a>
<a href="#">Link 2</a><br><br>
<a href="#">Link 3</a><br>
</div>
<div style="width:85%;border:1px solid red;" class="wrapper wrapper-content content-bg content-left-padding">
  <div id="service-content" class="row">
    <h2 style="margin-top: 22px; margin-left: 40px;max-width: 700px;margin-right: 50px;">Summary</h2>
    <p style="margin-left: 40px;max-width: 700px;margin-right: 50px;"></p>

  </div>
  <div id="about-content" class="hideme row">
    <div class="col-lg-12">
      <h2 style="margin-top: 22px; margin-left: 40px;max-width: 700px;margin-right: 50px;">About </h2>
      <p style="margin-top: 41px; margin-left: 40px;max-width: 700px;margin-right: 50px;">
        Gummi bears chocolate caramels biscuit bonbon. Candy donut apple pie. Bear claw apple pie sugar plum tiramisu jelly donut. Liquorice marzipan biscuit gummi bears dragée marshmallow. Jelly-o marshmallow candy pie gummi bears jujubes candy canes pie. Pastry
        gummi bears gummies cheesecake biscuit fruitcake candy canes soufflé soufflé. Chocolate bar apple pie jelly. Jelly croissant chocolate bar icing tart apple pie candy bonbon jelly beans. Chocolate lollipop soufflé tiramisu carrot cake danish sesame
        snaps soufflé.

      </p>
    </div>
  </div>
  <div id="more-content" class="hideme row">
    <div class="col-lg-12">
      <h2 style="margin-top: 22px; margin-left: 40px;max-width: 700px;margin-right: 50px;">More</h2>
      <p style="margin-top: 41px; margin-left: 40px;max-width: 700px;margin-right:...

CSS

.wrapper{
  float:left;
  display:inline-block;
}
.hideme{
 display:none;
}
.active{
  color:green;
}

JavaScript

$(".wrapper a").on("click",function(){
    		// without using any unique/id. We detect based on their index position. link index = hideme index
        var ind = $(this).index('a'); 
        $(".wrapper a").removeClass("active");
        $(this).addClass("active");

        $(".wrapper-content .hideme").hide();
        $(".wrapper-content .hideme").eq(ind).show();
    });