Milan... Posted September 6, 2019 Share Posted September 6, 2019 Hi, I've used this code in my website. I want "Hide --> Show", but the explenation automatic do "Show --> Hide". Is there a way to flip the code? Link to comment Share on other sites More sharing options...
Funce Posted September 8, 2019 Share Posted September 8, 2019 Welcome to the forums! This one is a pretty simple fix, all you need to do is add a style to your div. <button onclick="myFunction()">Click Me</button> <div id="myDIV" style="display: none;"> This is my DIV element. </div> Link to comment Share on other sites More sharing options...
shaili_shah Posted September 17, 2019 Share Posted September 17, 2019 (edited) HTML: <button onclick="myFunction()">Click Me</button><div id="myDIV" style="display: none;"> This is my DIV element.</div> Javascript : function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }} Edited September 17, 2019 by shaili_shah Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2019 Share Posted September 17, 2019 IF ALL YOU DO IS COPY PREVIOUS POSTS, what help are you! Link to comment Share on other sites More sharing options...
JMRKER Posted September 17, 2019 Share Posted September 17, 2019 Although this is the JS forum, there is a non-JS solution for programming completeness only. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <title> Hide/Show CSS only </title> <!-- For: http://w3schools.invisionzone.com/topic/60050-toggle-hideshow/ --> <style> #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; display: none; } #myBtn:checked + div { display: block; } label { border: 1px solid black; border-radius: 5px; background: lightblue; padding: 0.5em; } </style> </head> <body> <label for="myBtn">Click Me</label> <input type="checkbox" hidden id="myBtn"> <div id="myDIV"> This is my DIV element. </div> </body> </html> Moderators can move to CSS section if deemed appropriate. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now