CODEWITHSUNDEEP
javascripthtmlcss
Devangna Savalia
Devangna Savalia

Reputation: 49

on button click display hidden div and change image?

<div class="mac_1 tab_1 ipad_1" style=" float:right; margin:10px 20px 0 0;border:1px solid red;  display: none;"></div>
    <img src="images/mackbook.png" id="image"/>
    <a href="#" id="mac" class="button facebook" style="width:120px;  padding: 10px 0px; float:left; font: bold 22px 'Open Sans', sans-serif Helvetica, Clean, sans-serif;" OnClick="action();">Mackbook</a>    
    <a href="#" class="button facebook" style="width:80px;  padding: 10px 0px; float:left; font: bold 22px 'Open Sans', sans-serif Helvetica, Clean, sans-serif;" OnClick="action1();">Tablet</a>   
    <a href="#" class="button facebook" style="width:80px;  padding: 10px 0px; float:left; font: bold 22px 'Open Sans', sans-serif Helvetica, Clean, sans-serif;" OnClick="action2();">iPad</a> 
</div>

How to show the div .mac_1 and change the source of the image on button click.

Upvotes: 1

Views: 460

Answers (1)

m1crdy
m1crdy

Reputation: 1401

Try it with this jQuery snippet: 

$(document).ready(function(){
    $("#button").click(function(){
        $(".mac_1").css("display","block"); 
        $("#image").src("yourSource"); 
    });
});

Assuming you want to change the src of the image #image, and show your wrapper div .mac_1.

UPDATE

Would be better to place the inline styles to class "show" in css file. Then you could go:

...
$(".mac_1").addClass("show");
...

Would be the better approach.

Upvotes: 2

Related Questions