Question

I have a page which shows a particular div like this,

<div id="placeholder1" style="height: 150px;"></div>

but on some click I want to change my div dynamically to something like this.

<div id="placeholder2" style="height: 150px;"></div>

How to do it?

Answer 1

If you’re into jQuery, you can bind a click event to whatever element and change it like so (make sure the DOM has finished loading first):

$(function() { 
  $('#click_me_to_change_id').bind('click', function() {
    $('#placeholder1').attr('id', 'placeholder2');
  });
});

Edit: Upon inspection I realize you want to hide/show differing divs, try this out:

$(function() { 
  $('#click_me_to_toggle_visible_div').bind('click', function() {
    $('#placeholder1').css('display', 'none');
    $('#placeholder2').css('display', 'block');
  });
});