<div class="row">
  <div class="wrapper">
    <div class="button1">
    </div>
  </div>
  <div class="wrapper">
    <div class="button2">
    </div>
  </div>
  <div class="wrapper">
    <div class="button3">
    </div>
  </div>
  <div class="wrapper">
    <div class="button4">
    </div>
  </div>
  <div class="wrapper">
    <div class="button5">
    </div>
  </div>
</div>

<div class="row">
  <p class="text1">text display one appears here</p>
  <p class="text2">this is button two</p>
  <p class="text3">three</p>
  <p class="text4">this is 4</p>
  <p class="text5">this is the last one, five</p>
<div/>

body{
  background-color:whitesmoke;
  margin-top:30px;
}

.row{
  width: 525px;
  margin:0 auto;
  /*border:1px dashed black;*/
}

.text1, .text2, .text3, .text4, .text5, .row > p{
  display:none;
  text-align:left;
}
  

.wrapper{
  display:inline-block;
  position:relative;
  height:90px;
  width:90px;
  margin:5px;
  /*border:1px dashed black;*/
}

.button1, .button2, .button3, .button4, .button5{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 72%;
  width: 72%;
  margin: -36% 0 0 -36%;
  border-radius:200px;
  transition:0.5s ease;
}

.button1{
  background:#000000;
}

.button2{
  background:#333333;
}

.button3{
  background:#666666;
}

.button4{
  background:#999999;
}

.button5{
  background:#cccccc;
}

.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover{
  cursor: pointer;
  position: absolute;
   top: 50%;
   left: 50%;
   height: 100%;
   width: 100%;
   margin: -50% 0 0 -50%;
}

$( document ).ready(function() {
  
$(".button1").click(function(){
    $(".row>p").css("display", "none");
    $(".text1").css("display", "block");
});
  $(".button2").click(function(){
    $(".row>p").css("display", "none");
    $(".text2").css("display", "block");
});
  $(".button3").click(function(){
    $(".row>p").css("display", "none");
    $(".text3").css("display", "block");
});
  $(".button4").click(function(){
    $(".row>p").css("display", "none");
    $(".text4").css("display", "block");
});
  $(".button5").click(function(){
    $(".row>p").css("display", "none");
    $(".text5").css("display", "block");
});
  
});