I want to press a button to open the picture and close it. Found such a code on one site. I sit trying to open a picture through it, it does not come out. The code looks quite decent, so I try. Can someone tell me how this could be done?

Another question, the picture is better to put through the URL, or specify the path from the folder?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } </style> </head> <body> <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> <button onclick="myFunction()">Try it</button> <div id="myDIV"> This is my DIV element. </div> <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> <script> function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> </body> </html>

  • So what's the problem? Replace the contents of the diva in the picture instead of text. Now you just change the state of the display property, which is responsible for displaying the block: show or not. - Telion
  • one
    What does not suit you in the current behavior (see the working example in the question), and what does the "picture" have to do with it? - Igor

0