How to open a div .conteiner block to the whole page, as on this site, under the code before the question "Expand fragment" ?

https://jsfiddle.net/p7cc1uys/

 $("#button").click(function() { //alert("Проверка"); }); 
 * { margin: 0px; padding: 0px; } html, body { min-height: 100%; } body { background: #ddd; } .conteiner { background: #F3EFE1; overflow: auto; width: 200px; height: 200px; margin: 0 auto; margin-top: 40px; position: relative; -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); } #button { float: right; width: 80px; cursor: pointer; text-align: center; padding: 4px 13px; border: solid 1px #004F72; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font: 12px Verdana, Geneva, sans-serif; font-weight: bold; color: #E5FFFF; background-color: #3BA4C7; background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%); -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="conteiner"> <div id="button">Развернуть</div> </div>

    4 answers 4

    Another option

     $(".button").click(function() { var parent = $(this).parents()[0]; //получаем родительський элемент var width = $(parent).width(); //узнаем ширину родительського блока $(parent).toggleClass("full"); //добавляем/убираем класс где блок во весь екран if(width=='200'){ //если ширина равна 200 $(parent).children('.button').text('Свернуть'); //если истина то надпись "Свернуть" } else { $(parent).children('.button').text('Развернуть');//если ложь то надпись "Свернуть" } }); 
     /* блок во весь екран */ .full { width: 100% !important; height: 100% !important; position: absolute !important; margin-top: 0px !important; z-index: 99999 !important; } * { margin: 0px; padding: 0px; } html, body { min-height: 100%; } body { background: #ddd; } .conteiner { background: #F3EFE1; overflow: auto; width: 200px; height: 200px; margin: 0 auto; margin-top: 40px; position: relative; -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); } .button { float: right; width: 80px; cursor: pointer; text-align: center; padding: 4px 13px; border: solid 1px #004F72; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font: 12px Verdana, Geneva, sans-serif; font-weight: bold; color: #E5FFFF; background-color: #3BA4C7; background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%); -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="conteiner"> <div class="button">Развернуть</div> </div>

    • Thanks for the answer. How to make a check when the block is full screen to change the text: Expand / Collapse? - Petrovich
    • If your block width is fixed then you will know the width of the block if it is not equal to 200px, then the text will "collapse" if it is equal to 200px, then "expand". Corrected the answer. - Dmitriy Kondratiuk
    • And thanks again. - Petrovich

    It seems to be so add a class that opens or makes it to 100vw + 100vh and all

     $(document).ready(function() { $(".button").click(function() { $("pre").toggleClass("show"); $(this).toggleClass("active"); }); }); 
     * { margin: 0; padding: 0; } html, body { background: #ddd; } .wrapper { display: table; margin: auto; } pre { width: 540px; margin: 20px auto; height: 300px; background: #fefefe; overflow: hidden; overflow-y: scroll; padding-left: 10px; font-size: 12px; } p.button { display: inline; padding-top: 3px; cursor: pointer; } .icon-enlarge { padding-right: 6px; } p i+i { position: relative; top: -2px; } .show { width: 100vw; height: auto; font-size: 20px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 100; overflow-y: auto; } .active { position: fixed; top: 0; right: 0; z-index: 101; } main { width: 80%; margin: auto; } main p { font-size: 20px; width: 90%; text-align: justify; margin: auto; } .text { position: relative; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://i.icomoon.io/public/temp/36225a5027/UntitledProject/style.css"> <main> <h2>Donec rutrum congue leo eget malesuada.</h2> <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p> </main> <div class="wrapper"> <code> <pre> * { margin: 0px; padding: 0px; } html, body { min-height: 100%; } body { background: #ddd; } .conteiner { background: #F3EFE1; overflow: auto; width: 200px; height: 200px; margin: 0 auto; margin-top: 40px; position: relative; -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); } #button { float: right; width: 80px; cursor: pointer; text-align: center; padding: 4px 13px; border: solid 1px #004F72; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font: 12px Verdana, Geneva, sans-serif; font-weight: bold; color: #E5FFFF; background-color: #3BA4C7; background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%); -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; } </pre> </code> <p class="button"> <i class="icon-enlarge"></i> <i class="text">открыть на весь экран</i> </p> </div> <main> <h2>Donec rutrum congue leo eget malesuada.</h2> <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p> </main>

    link to codepen

       $("#button").click(function() { var h = $(document).height();//получаем высоту документа и записываем в переменную "h" $(".conteiner").css({'width': "100%", 'height': h, 'position': "absolute",'margin-top': "0px", 'z-index': "99999"}); //устанавливаем новые стили для <div class="conteiner"> }); 
       * { margin: 0px; padding: 0px; } html, body { min-height: 100%; } body { background: #ddd; } .conteiner { background: #F3EFE1; overflow: auto; width: 200px; height: 200px; margin: 0 auto; margin-top: 40px; position: relative; -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); } #button { float: right; width: 80px; cursor: pointer; text-align: center; padding: 4px 13px; border: solid 1px #004F72; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font: 12px Verdana, Geneva, sans-serif; font-weight: bold; color: #E5FFFF; background-color: #3BA4C7; background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%); -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="conteiner"> <div id="button">Развернуть</div> </div>

      • I have already tried this option. I need this block to overlap the rest of the content on the site text, photos, and so on ... - Petrovich
      • Details need to be clarified in the question. Corrected the answer. - Dmitriy Kondratiuk

       $("#button").click(function() { $(this).closest('.conteiner').toggleClass('expland'); }); 
       * { margin: 0px; padding: 0px; } html, body { min-height: 100%; } body { background: #ddd; } .conteiner { background: #F3EFE1; overflow: auto; width: 200px; height: 200px; margin: 0 auto; margin-top: 40px; position: relative; -webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); -moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32); } .conteiner.expland { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; margin: 0; } #button { float: right; width: 80px; cursor: pointer; text-align: center; padding: 4px 13px; border: solid 1px #004F72; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font: 12px Verdana, Geneva, sans-serif; font-weight: bold; color: #E5FFFF; background-color: #3BA4C7; background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%); -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="conteiner"> <div id="button">Развернуть</div> </div>