admin管理员组

文章数量:1279145

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;">

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;">
  • javascript
  • html
  • css
Share Improve this question edited Oct 31, 2016 at 15:57 Teshtek asked Oct 31, 2016 at 15:07 TeshtekTeshtek 1,3521 gold badge12 silver badges22 bronze badges 13
  • 2 You need Javascript to to that – Towkir Commented Oct 31, 2016 at 15:08
  • 2 What do you tried ? This is the most simple task on javascript... – Marcos Pérez Gude Commented Oct 31, 2016 at 15:09
  • I dont think there is show/hide option in CSS. Go through this link - stackoverflow./questions/13630229/… – yashpandey8055 Commented Oct 31, 2016 at 15:10
  • in the javascript add display:none to the img tag, i remend doing this by giving the img tag an id. – Kevin Kloet Commented Oct 31, 2016 at 15:10
  • 1 There is a show()/hide() method in jQuery (which is a library built on js), read about it. – Saurabh Sharma Commented Oct 31, 2016 at 15:11
 |  Show 8 more ments

12 Answers 12

Reset to default 4

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./images/branding/googleg/1x/googleg_standard_color_128dp.png">
        <p id="p551"></p>
    </div>
</body>

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>

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);
};

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

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>

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>

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;
}

<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>

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.

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./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...

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 recend jquery. I hope you will understand.

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./preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
</div>

本文标签： javascriptCSSShow element by clicking buttonStack Overflow

版权声明：本文标题：javascript - CSS - Show element by clicking button - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741239555a2363701.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。