CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4231762
user4231762

Reputation:

Showing image on button click

Wondering how I would set the set the visibility of the pictures by clicking the button.

<body class="body page-index clearfix">
<img class="image image-1" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
<img class="image image-2" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
<button class="_button" >Test</button>
<img class="image image-3" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">


.image {
    display: block;
    visibility: hidden;
    height: auto;
    overflow: hidden;
}

fiddle: https://jsfiddle.net/cz5yyu83/

Upvotes: 1

Views: 75

Answers (2)

TheCarver
TheCarver

Reputation: 19733

With jQuery:

$(document).ready(function() {
    $('._button').click(function() {
       $('.image').css('visibility','visible'); 
    });
});

https://jsfiddle.net/hyh9zajp/

With pure Javascript, it is very simple, too:

var button = document.getElementsByClassName('_button');
var images = document.getElementsByClassName('image');

button.addEventListener('click', function() {
    images.style.visibility = "visible";
});

Upvotes: 1

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

Firstly include the jQuery library in your head tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

And after that use this script:

$(document).ready(function() {
    $('._button').click(function(){
        $('.image').css('visibility', 'visible');
    });
});

Here is the jsfiddle: https://jsfiddle.net/cz5yyu83/1/

Upvotes: 2

Related Questions