How to toggle between two divs?

Question

I'm trying to toggle between div .cam1 and div .cam2, but nothing is working, heres the code;

HTML:

 <div class="cam1"></div>
 <div class="cam2"></div>

CSS:

.cam1 {
position:absolute;
height:100%;
width:100%;
background-color:red;
}

.cam2 {
position:absolute;
height:100%
width:100%
background-color:blue;
}

JS:

$('.cam2').hide();
$('.cam1, .cam2').on('click',
    function()
    {
        $('.cam1, .cam2').toggle()
    }
);

$(document).read(main)

Answer 1

Your dom elements are not loaded when you are trying to hide and bind the event to them. You need to wrap the code in DOM ready event:

$(function(){
    $('.cam2').hide();
    $('.cam1, .cam2').on('click',function(){
        $('.cam1, .cam2').toggle();
   });
});

Demo