Displaying hidden content with onClick event in html with css and js

Question

At first I wanted to hide all the body and show only one image, but it seems that it's not possible since hiding the body with display:none would hide all of it's children. So I changed my code to just hiding the parameters I want to hide.

At Bottom line: I want to show the hidden content when I click on the content that is not hidden.

Here is my HTML Code enter image description here js code is enter image description here And finally css code is enter image description here

Even the code looks very simple but i'm struggling: when I click on the image, nothing happens.

I'm absolutely sorry if my question is not very well formulated, this is my first question on stackoverflow and I will be glad to make it more clear. Thank in advance.

please add the code in text form to the question. you may use the power of <>, where you get a small IDE. — Nina Scholz
– Nina Scholz, Commented Jan 26, 2019 at 13:01
You are using .style.display=block, that should be the string "block", the quotes are important. (Your code as it is should be throwing an error, always look in the console when things don't work as expected.) — Robin Zigmond
– Robin Zigmond, Commented Jan 26, 2019 at 13:07

Martin Čapek · Accepted Answer · 2019-01-26 13:09:01Z

1

You have an error in JS, you have to use quotations marks.

... .style.display = "block";

answered Jan 26, 2019 at 13:09

Martin Čapek

546 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aniket Kariya · Accepted Answer · 2019-01-26 13:38:01Z

0

<html>
<head>
    <style>
        p {
            display: none;
        }
    </style>
</head>
<body>
    <p>This is some random text</p>
    <img id="click" src="" width="500px" height="500px">

    <script>
        var toggle = document.getElementById("click");
        toggle.addEventListener("click", show);

        function show() {
            var p = document.getElementsByTagName("p")[0].style.display = "block";
        }
    </script>
</body>
</html>

answered Jan 26, 2019 at 13:38

Aniket Kariya

2,1102 gold badges24 silver badges28 bronze badges

Comments

Ali Chbinou · Accepted Answer · 2019-01-29 18:31:23Z

0

Thank you all for your support! I've actually found the answer. I was facing some problems with getElementsByTagName and getElementsByClassName since you actually had to use the for loop to display all of the elements. So I just used getElementById and used the "onclick" event in the HTML code. Thanks!

answered Jan 29, 2019 at 18:31

Ali Chbinou

931 silver badge11 bronze badges

Collectives™ on Stack Overflow

Displaying hidden content with onClick event in html with css and js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related