How do I change content and background color for a box on click?

Question

This is my first time tackling this so please correct me if my terminology for this wrong.

I have a div box that's going to be 500 in height and 500 in width, in it I will have text content when it's first loaded. At the bottom I will have a button that says "click here." When that button is clicked I want to change the background on the box and load images.

Please refer to the drawing below:

Answer 1

I'd personally take a different more straight-forward approach. That is, if all you need is a few images you might as well fetch them in advance and hide them, skipping unnecessary server requests:

Working fiddle

CODE:

HTML:

<div id="container">
    <div id="button_layer">
        <p>Some Text</p>
        <button>Click Me</button>
    </div>
    <div id="images_layer">
        <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
        <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
         <img src="http://mattat.org.il/wp-content/themes/matat/img/aminadav.jpg"/>
    </div>
   </div>

​ CSS:

#container {
width:500px;
height:500px;
background:grey;
}
#images_layer {
display:none;
}

JS:

 $(document).ready(function(){
    $("button").click(function(){
         $("#button_layer").hide();
        $("#images_layer").show();
        $("#container").css("background","yellow");
    })
  });

​

Answer 2

Try this

var images = 10;

$('button').on('click' , function(){
    var html = '';
    for(var i =0;i<images ; i++){
      html += '<img src="images/image-'+ images + '"></img>';   
    }

    $('.a').removeClass('a').addClass('b').html(html);

});​

​<div class="a">
   I am the initial div...
</div>

​<button>Click Me</button>​​​​​​​​​​​​​​​​​​​​​​​​​

Check Fiddle

Answer 3

I would accomplish this task by capturing the click function, then loading some data into the div by requesting it from the server.

$('button').on('click', function(){
    $.ajax({
        type: 'GET', //default anyway
        url: '/path/to/my/controller.ext',
        data: {'getImages' : true},
        success: function(data){
             $('.box').html(data); 
        }
    });
});

Then in the server side, we can capture the get request and return a string of images; this example is in PHP.

if(isset($_GET['getImages']) && TRUE === $_GET['getImages']):
    //build some string to pass images..
    $str = '<img src="path/to/my/first_img.ext"/><img src="path/to/my/second_img.ext"/><img src="path/to/my/third_img.ext"/><img src="path/to/my/fourth_img.ext"/><img src="path/to/my/fifth_img.ext"/>';
    echo $str;
endif;

If the request to the filename provided in our .ajax() call happens, then it will use a GET request to grab images. Our conditional checks for the existence and value of getImages . We build a string with images inside of it, and pass it back. the success:function(data) of our ajax() call handles the returned data. In this example. data is the $str we made in our php conditional . We simply change the HTML of the box to the string that we provided from the server.

Answer 4

I uploaded an example for changing the background color with an animation:

http://jsfiddle.net/TBvcW/1/

It's made using CSS3, but browsers who don't support it will change the color without an animation. The key code for the animation of the color are these CSS properties:

-webkit-transition: background-color 0.5s, color 0.5s;
-mox-transition: background-color 0.5s, color 0.5s;
-o-transition: background-color 0.5s, color 0.5s;
transition: background-color 0.5s, color 0.5s;

Where, we are deciding which property will be animated when changed ( through CSS ), and how much time the animation will take.

You can even change the Height of the box and add the images as described in the other answers:

http://jsfiddle.net/TBvcW/2/

Cheers.