html - Can the following jQuery code be simplified? -

i have created 6 buttons , using jquery able block of data on click of each buttons. want know whether jquery code written can minimized? how achieve minimized code?

$("#button1").click(function() {    $("#text1").show();    $(".close").show();    $(".close").click(function() {      $("#text1").hide();    });  });    $("#button2").click(function() {    $("#text2").show();    $(".close").show();    $(".close").click(function() {      $("#text2").hide();    });  });    $("#button3").click(function() {    $("#text3").show();    $(".close").show();    $(".close").click(function() {      $("#text3").hide();    });  });    $("#button4").click(function() {    $("#text4").show();    $(".close").show();    $(".close").click(function() {      $("#text4").hide();    });  });    $("#button5").click(function() {    $("#text5").show();    $(".close").show();    $(".close").click(function() {      $("#text5").hide();    });  });    $("#button6").click(function() {    $("#text6").show();    $(".close").show();    $(".close").click(function() {      $("#text6").hide();    });  });

#header {    width: 640px;    height: 480px;    background-color: grey;  }    div button {    width: 100px;    height: 100px;    font-size: 16px;    margin: 50px;    float: left;    cursor: pointer;  }    .block {    position: absolute;    background-color: #000;    width: 640px;    height: 480px;    font-size: 14px;    color: white;    text-align: center;    display: none;    opacity: 0.7;  }    .block h1 {    margin-top: 160px;  }    .close {    width: 50px;    height: 50px;    border: 2px solid white;    border-radius: 50px;    display: none;    margin-top: -220px;    margin-left: 560px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="header">      <div>      <div class="block" id="text1">        <h1> button1 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button1"> button_1 </button>    </div>      <div>      <div class="block" id="text2">        <h1> button2 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button2"> button_2 </button>    </div>      <div>      <div class="block" id="text3">        <h1> button3 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button3"> button_3 </button>    </div>      <div>      <div class="block" id="text4">        <h1> button4 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button4"> button_4 </button>    </div>      <div>      <div class="block" id="text5">        <h1> button5 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button5"> button_5 </button>    </div>      <div>      <div class="block" id="text6">        <h1> button6 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button6"> button_6 </button>    </div>      <div>

$("button.button").click(function() {    $(this).prev('.block').show();    $(".close").show();      });        $(".close").click(function() {      $(".block:visible").hide();    });

#header {    width: 640px;    height: 480px;    background-color: grey;  }    div button {    width: 100px;    height: 100px;    font-size: 16px;    margin: 50px;    float: left;    cursor: pointer;  }    .block {    position: absolute;    background-color: #000;    width: 640px;    height: 480px;    font-size: 14px;    color: white;    text-align: center;    display: none;    opacity: 0.7;  }    .block h1 {    margin-top: 160px;  }    .close {    width: 50px;    height: 50px;    border: 2px solid white;    border-radius: 50px;    display: none;    margin-top: -220px;    margin-left: 560px;  }    .button{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="header">      <div>      <div class="block" id="text1">        <h1> button1 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button1" class="button"> button_1 </button>    </div>      <div>      <div class="block" id="text2">        <h1> button2 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button2" class="button"> button_2 </button>    </div>      <div>      <div class="block" id="text3">        <h1> button3 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button3" class="button"> button_3 </button>    </div>      <div>      <div class="block" id="text4">        <h1> button4 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button4" class="button"> button_4 </button>    </div>      <div>      <div class="block" id="text5">        <h1> button5 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button5" class="button"> button_5 </button>    </div>      <div>      <div class="block" id="text6">        <h1> button6 </h1>        <h5> displays block of elements </h5>        <button class="close"> close </button>      </div>      <button id="button6" class="button"> button_6 </button>    </div>      <div>

1. add common class each button
2. use context tell clicked button
3. use prev() previous div needs shown
4. use selector .block:visible select visible block hide