I thought there was infa, but whether I write incorrectly or what. The essence of the problem is this: There are two blocks, one hidden, the other open.

<a href="#">Кнопка для закрытия ΠΈ открытия Π±Π»ΠΎΠΊΠΎΠ²</a> <div style="display:none; top:0; left:0; min-height:100%"> <ul>МСню</ul> </div> <div style="display:block; top:0; left:0; min-height:100%"> <p>ΠΈΠ½Ρ„Π° </p> </div>

When you click on a particular button, the open is closed and hidden appears and vice versa. With smooth effect, vertical blocks, i.e. to left to right. How to do it? and where to dig, please help

  • "With a smooth effect" - jQuery has a animate () method. I think this side is worth digging: api.jquery.com/animate - IVsevolod

2 answers 2

For smoothness use animate

 $(".button_do").click(function() { $("#menu, #info").toggle(); }); 
 <script src="//code.jquery.com/jquery.min.js"></script> <button class="button_do">Кнопка для закрытия ΠΈ открытия Π±Π»ΠΎΠΊΠΎΠ²</button> <div id="menu" style="display:none;"> <p>ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ</p> </div> <div id="info"> <p>Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π±Π»ΠΎΠΊ</p> </div>

    Here is:

     $(".button_do").click(function() { if($("#menu").is("[hidden]")) { $("#menu").attr("hidden", false); $("#info").attr("hidden", true); } else { $("#menu").attr("hidden", true); $("#info").attr("hidden", false); } }); 
     #menu, #info { top:0; left:0; min-height: 100%; } 
     <script src="//code.jquery.com/jquery.min.js"></script> <a href="javascript://" class="button_do">Кнопка для закрытия ΠΈ открытия Π±Π»ΠΎΠΊΠΎΠ²</a> <div id="menu" hidden> <ul>МСню</ul> </div> <div id="info"> <p>ΠΈΠ½Ρ„Π° </p> </div>

    PS Different arrangement of elements, since The #menu object has default styles set by the browser: -webkit-padding-start: 40px;

    • It's not nice to copy the script from someone else's response - EatMyDust
    • I think you took it from me, forgetting to add more styles - ikerya
    • true? 2 blocks on html? and you can’t write them differently, but from the change history you can see who took what from whom - EatMyDust
    • go far, good luck - EatMyDust
    • You better tell me what this is "<ul> Menu </ ul>" - Vlad Vlad