CSS - Show element by clicking button

Question

How can I show/hide the image by clicking the button, in my case PROBLEM 551, using css?

<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img src="PROBLEM551.png">
        <p id="p551"></p>
    </div>
</body>

UPDATE :

I edited the code so this is :

<head>
    <script>
        document.write("<h1>\"Benvenuto nel programma\"</h1>\n<h3>Qui imparerò ad usare JavaScript facendo i problemi di Eulero</h3>");

        function problem(){
            var img = document.getElementById('problemi');
            return img.style.display = img.style.display === 'block' ? 'none' : 'block';
        }

        function problem551(){
            problem();
            .............
        }


    </script>

</head> 

<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img id="problemi" src="PROBLEM551.png">
        <p id="p551"></p>
    </div>
</body>

<style>
    img {....

But I've always, when I open the program, the image shown..How can I hide it ?

UPDATE :

I found the solution :

<img id="problemi" src="PROBLEM551.png" style="display: none;">

What do you tried ? This is the most simple task on javascript... — Marcos Pérez Gude, Oct 31 '16 at 15:09
I dont think there is show/hide option in CSS. Go through this link - http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — voucher_wolves, Oct 31 '16 at 15:10
in the javascript add `display:none` to the img tag, i recommend doing this by giving the img tag an id. — Kevin Kloet, Oct 31 '16 at 15:10
@Towkir you are not correct. He can do that using only CSS. All he needs to do is change html a bit. — El Danielo, Oct 31 '16 at 15:10
Well you cant do that with CSS. You have to use Javascript, and you already are with that onclick call to the `problem551()` function. So please post your JS code as well. — TheValyreanGroup, Oct 31 '16 at 15:11
There is a show()/hide() method in jQuery (which is a library built on js), read about it. — Saurabh Sharma, Oct 31 '16 at 15:11
@SaurabhSharma You are referencing jQuery. Pure JS does not have that. — TheValyreanGroup, Oct 31 '16 at 15:12
@SaurabhSharma `.show()` and `.hide()` are jQuery methods not javascript — Kevin Kloet, Oct 31 '16 at 15:13
@ElDanielo No, he is not incorrect. There is no way to truly do this in pure CSS. There are some known "hacks" with checkboxes and what not, but you cannot detect a click in CSS. — TheValyreanGroup, Oct 31 '16 at 15:13
Possible duplicate : http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button — Zakaria Acharki, Oct 31 '16 at 15:14
For those saying that there is no way to do this in pure JS, check out `HtmlElement.style.display` — MineAndCraft12, Oct 31 '16 at 15:16

score 4 · Answer 1 · answered Oct 31 '16 at 15:20

Only html and css solution using checkbox.

input[type=checkbox]{
display:none;
}
input[type=checkbox]:checked + img{
display:none;
}

img{display:block;}
label{
display:inline-block;
  background: gray;
  border-radius: 5px;
  padding:10px;
  /* Style your button here */
}

<body>
    <div>
        <label for="problem551">problem551</label> 
        <input type="checkbox" id="problem551">
      
        <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
        <p id="p551"></p>
    </div>
</body>

score 3 · Answer 2 · answered Oct 31 '16 at 15:20

It also can be achieved without Javascript, using a hidden checkbox:

    label.show {
    /*   make it look like a button if needed */
      border: 2px solid blue;
      display: block;
      cursor: pointer;
    }
    input.show {
      /* we don't need to display the actual checkbox */
      display: none;
    }
    input.show + * {
      /* the element after the checkbox will be hidden when the checkbox is not checked */
      visibility: hidden;
    }
    input.show:checked + * {
      /* the element will be shown when the checkbox is checked */
      visibility: visible;  
    }
    img {
      /* just a placeholder for the image */
      border: 5px solid red;
      width: 300px;
      height: 300px;
    }

    <div>
        <label for="problem551" class="show">
          problem 551<br>(click to show image)
        </label>
        <input type="checkbox" class="show" name="problem551" id="problem551">
        <img src="PROBLEM551.png">
        <p id="p551"></p>
    </div>

score 1 · Answer 3 · answered Oct 31 '16 at 15:14

Why not just use JavaScript? Give the img tag an id. And then remove it by id.

<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img id="problem551" src="PROBLEM551.png">
        <p id="p551"></p>
    </div>
</body>

JavaScript:

function problem551() {
   var element = document.getElementById("problem551");
   element.parentNode.removeChild(element);
};

score 1 · Answer 4 · answered Oct 31 '16 at 15:15

Its not going to fly with a button, but a checkbox could be used to handle that. The checkbox could even be styled (via a label) like a button.

<label class="btn" for="checkbox-example">test</label>
<input id="checkbox-example" type="checkbox" />
<img src="http://placehold.it/100x100" />

with following css:

label {
  background: rgba( 0, 0, 0, 0.1);
  border: 1px solid #999;
  border-radius: 4px;
  padding: 6px 12px;
}
input[type="checkbox"] {
  display: none;
  &:checked + img {
    display: none;
  }
}

http://codepen.io/amishstripclub/pen/qazzgr

score 1 · Answer 5 · answered Oct 31 '16 at 15:16

If you needed to do this without JavaScript, you could replace the button with a similarly-styled <label> attached to a hidden checkbox. Then style the element based on whether the checkbox is checked.

.button {
  background: #eee;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  border: 1px solid #333;
  }
#toggle-img:checked ~ img[src="PROBLEM551.png"] {
  display: none;
  }

    <div>
        <input type="checkbox" id="toggle-img" style="display:none">
        <label onclick="problem551()" class="button" for="toggle-img">PROBLEM 551</label>
        <img src="PROBLEM551.png">
        <p id="p551"></p>
    </div>

score 1 · Answer 6 · edited Nov 17 '16 at 18:33

1

This works :Pure CSS JSFiddle

You will need to use <a> however you can style it to look like and feel just like a button

 <div>
        <a id="aa" onclick="problem551()" href="#problen551" >PROBLEM 551</a>
        <img src="PROBLEM551.png" id="problen551">
        <p id="p551">rrrr</p>
    </div>




#problen551:target{
   display:inline;
}
#problen551 {
  display:none;
}

edited Nov 17 '16 at 18:33

Mr Lister

45,515
15
108
150

answered Oct 31 '16 at 15:19

O_Z

1,515
9
11

score 1 · Answer 7 · answered Oct 31 '16 at 15:45

You can use <input type="checkbox"> element, css :checked, :not(:checked), adjacent sibling selector + selectors, :before to toggle img display property

input {
  appearance: button;
  -webkit-appearance: button;
  -moz-appearance: button;
  width: 100px;
  height: 30px;
  display: block;
}
input:before {
  content: "Problem 551";
  position: relative;
  left: 12px;
  top: 8px;
}
input:checked + img {
  display: none;
}
input:not(:checked) + img {
  display: block;
}

<body>
  <div>
    <input type="checkbox" />
    <img id="img" src="http://placehold.it/300x150?text=551">
    <p id="p551"></p>
  </div>
</body>

FalcoB · Answer 8 · 2016-10-31T15:16:52.027

you need javascript for that....

i moved the img in the p tag, so that i can target it by the id #p551... another approach would be, to give the img a id

function problem551(){
  image = document.getElementById("p551");
  image.style.display = 'block';
  }

p#p551{
  display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        
        <p id="p551"><img src="PROBLEM551.png"></p>
    </div>
</body>

i used jquery, because it is way easier... tell me, if that is no option...

update

i changed it to pure javascript...

I want do it with Js ... I'm googling now – Teshtek Oct 31 '16 at 15:14 — Teshtek, Oct 31 '16 at 15:14

score 0 · Accepted Answer · answered Oct 31 '16 at 15:14

0

<body>
    <script>
        function problem551() {
            var img = document.getElementById('img551');
            img.style.display = img.style.display === 'block' ? 'none' : 'block'; 
        }
    </script>
    <div>
        <button onclick="problem551()" >PROBLEM 551</button>
        <img src="PROBLEM551.png" id="img551">
        <p id="p551"></p>
    </div>
</body>

answered Oct 31 '16 at 15:14

Eugene Tsakh

2,777
2
14
27

This' good solution, but how to get the image hidden in prior, and maybe then to show it? How to manipulate this code to do it? – Teshtek Oct 31 '16 at 15:46
You can use this code to show the image: document.getElementById('img551').style.display = 'block'; And this to hide: document.getElementById('img551').style.display = 'none'; – Eugene Tsakh Oct 31 '16 at 15:50
I want the image, when it borns, hidden...Anyway I have now the solution..ok this is my answer! :) – Teshtek Oct 31 '16 at 15:59

score 0 · Answer 10 · answered Oct 31 '16 at 15:14

To set the visibility of our element using JavaScript, we can access the image's style.display property.

Make a small modification to your HTML file...

<img src="PROBLEM551.png" id="PROBLEM551">

In our JavaScript, we can declare the following function...

function problem551(){
    if(document.getElementById("PROBLEM551").style.display === "none"){
        document.getElementById("PROBLEM551").style.display = "inline"
    }else{
        document.getElementById("PROBLEM551").style.display = "none";
    }
}

In the function, if our display has been set as none, set display to inline (or a img's version of visible).

If display has not yet been set or is not already none, set it to none, which will make the element invisible.

Razia sultana · Answer 11 · 2016-10-31T16:13:51.183

var toggle  = document.getElementById("button");
var content = document.getElementById("image");

toggle.addEventListener("click", function(){
  content.style.display = (image.dataset.button ^= 1) ? "block" : "none";
}, false);

#image{
  display:none;
}

<button id="button">PROBLEM 551</button>
<div id="image"><img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
</div>

score 0 · Answer 12 · edited May 23 '17 at 12:02

you have no solution in css for that. CSS stands for cascading style sheets.Its just give style to your page.It do not do function like show are / hide.

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

javascript hide/show element

Try to to do it by yourself so you can learn it.

You have to use javascript or jquery for this purpose. I will reccomend jquery. I hope you will understand.

CSS - Show element by clicking button

12 Answers12