Question

I am trying to use jquery to show my div containers coordinate with my buttons..All div containers will be hided when page first loaded. When use clicks a button, different container will show up. My problem is that the div will only show up when click a button in Chrome but not firefox or IE. I appreciate if anyone could help me about this. Thanks.

html

<div>
<ul id="menu">
    <li id="project"><a href="#"></a></li>
    <li id="code"><a href="#"></a></li> 
    <li id="skill"><a href="#"></a></li>
    <li id="about"><a href="#"></a></li>
    <li id="contact"><a href="#"></a></li>
</ul>
</div>

<div id='projects'> 
   contents 
</div>
<div id='skillContainer'> 
   contents 
</div>
<div id='codeContainer'> 
   contents 
</div>
.......

My Jquery…

function breakline(position) {
   $('#breakline').animate({
   top:position},'slow');
   console.log(position);
   };

function hideAll() {
  $('#projects').hide(); 
  $('#codeContainer').hide();
  $('#skillContainer').hide();
  $('#aboutContainer').hide();
  $('#contactContainer').hide();
  $('#bonusSkill').hide();
  $('#mePic').hide();
  $('#phoneNumber').hide();

};

hideAll(); 

$('#project a').click(function(){
  hideAll();
  breakline(256);

  $('#projects').animate(  //won't show in firefox or IE
    {opacity:'toggle', height:'toggle'},'slow');


});



$('#code a').click(function(){
  hideAll();
  breakline(200);

  $('#codeContainer').animate( //won't show in firefox or IE
    {opacity:'toggle', height:'toggle'},'slow');

});




$('#skill a').click(function(){

  hideAll();
  breakline(236);

  $('#bonusSkill').animate(  //won't show in firefox or IE
    {opacity:'toggle', height:'toggle'},'slow');

  $('#skillContainer').animate(
    {opacity:'toggle', height:'toggle'},'slow');


});

Answer 1

From what I can see you’re using console.log which is unsuported in IE and Firefox (without Firebug). Removing that line should fix your problem.