How to make it so that when you click on the "button" on the website, a DiV block appears with a ready text in some place under the button?

    3 answers 3

    At the block that you want to open, you put display: non. With js, you put a handler on a button that, when clicked, changes display: none to display: block. Something like this:

    function viewDiv(){ document.getElementById("div1").style.display = "block"; }; 
     #div1{ display: none; } 
     <input type="button" value="Click" onmousedown="viewDiv()"> <div id="div1">Π‘Π»ΠΎΠΊ</div>

    • Thank! It seems everything is clear - Vaagn Akopyan
    • fixed why? o_O - Qwertiy ♦
    • @Qwertiy wrote randomly. I'll change it now. Thank. - nikit204
    • And why onmousedown ? That is, 1. why such an obsolete form of adding a handler? and 2. why mousedown instead of click? - Qwertiy ♦
    • If not difficult, can you implement the actual form of the handler? - Vaagn Akopyan

    Here is also an interesting example (jquery)

     $('.btn').click(function(){ $(".block_with_text").fadeToggle(100); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <button class="btn">Кликни по мнС</button> <div class="block_with_text">Lorem ipsum dolor sit amet</div>

      Alternatively, you can do without js, it depends on the specific task and capabilities. For example, using a hidden checkbox and a label that will act as a pseudo-switch, switch the visibility of the DIV:

       .text, input[type="checkbox"] { display: none; } input[type="checkbox"]:checked ~ .text { display: block; } /* Бтилизация псСвдокнопки */ .btn { display: inline-block; margin-bottom: 4px; padding: 4px 8px; background-color: #ffffff; border: 1px solid #eeeeee; cursor: pointer; } 
       <label for="pseudoBtn" class="btn">"Кнопка"</label> <input type="checkbox" id="pseudoBtn"> <div class="text">Π“ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ тСкст</div>