<button id="show1">ПОКАЗАТИ БЛОК1</button><button id="show2">ПОКАЗАТИ БЛОК2</button><button id="show3">ПОКАЗАТИ БЛОК3</button>
<div class="hidden1">
<h1>hidden1</h1>
</p>Остання глава підручника історії для 11 класу Мединського та Торкунова розповість про причини початку СВО</p>
</div>
<div class="hidden2">
<h1>hidden2</h1>
<p>Остання глава підручника історії для 11 класу Мединського та Торкунова розповість про причини початку СВО</p>
<p style="font-size:30em;text-align:center"><br><br>!!!!<br></p>
</div>
<div class="hidden3">
<h1>hidden3</h1>
<p>Остання глава підручника історії для 11 класу Мединського та Торкунова розповість про причини початку СВО</p>
<p style="font-size:30em;text-align:center"><br><br>!!!!<br></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
/* JquerytmlBoxBox autor: Kuryliak. V.E. [UACMS]  do not delete this line */
(function( $ ) {

 $("head").append("<style>.overlay,.overlay_bg,.tip,.htmlBox{margin:0;padding:0;z-index:999;box-sizing:border-box}.overlay{position:absolute;height:100%;width:100%;top:0;left:0;display:none;}.overlay_bg{background:rgba(9,9,9,0.9);position:fixed;top:0;left:0;bottom:0;right:0;overflow:auto;}.htmlBox{border:2px #0ff solid;position:relative;width:98%;min-height:99%;float:none;background:#fff;margin:2px auto;}.tip{color:#fff;background:#000;position:fixed;top:6px;left:1%; width:40px;height:40px;font-size:40px;text-align:center;cursor:pointer;opacity:0.3;}.tip:hover{opacity:1;}</style>");

 $.fn.jQueryhtmlBox = function(pr) {
 var defaults = {imcur:'pointer',class:'hiddenhtml'};
 var options = $.extend({}, defaults, options,pr);
 var $im=$(this);
 
 this.each(function() {
   $im.css({"cursor":options.imcur});
   $('.'+options.class).css({"display":"none"});

 });
 
 $im.click(function(){
   $("body").append("<div class='overlay'><div class='overlay_bg'><div class='htmlBox'></div><div class='tip'>X</div></div>");
   $('.overlay_bg').bind('contextmenu', function(e) { return false;});
   $('.htmlBox').html($('.'+options.class).html());
   $(".overlay").fadeIn(600);
   var w = $('.htmlBox').width();$('.tip').css('left',w-40+document.documentElement.clientWidth/100);
   $(".tip").click(function(){
       $(".overlay").fadeOut(400);
       setTimeout(function() {
          $(".overlay").remove();
       }, 400);
   });      return false;
 });

return this;
};
})(jQuery);
/* END JquerytmlBoxBox */

$("#show1").jQueryhtmlBox({class:'hidden1'});
$("#show2").jQueryhtmlBox({class:'hidden2'});
$("#show3").jQueryhtmlBox({class:'hidden3'});

</script>