Joshua Joshua - 3 months ago 8
CSS Question

.toggleClass not working, no idea why

I am trying to get a div box to expand when clicked, and go back to normal size when clicked again. Seems simple enough, but I can not get it to work no matter what I try. I have no idea what could be going wrong as the part of the code where the error is most likely to be occurring is not very long. Thanks for your time!
https://jsfiddle.net/uL1r08am/

<div id='panelHolder'>
<div id='panel1' class='panels'></div>
</div>





.panels {
position:relative;
border:2px solid silver;
transition:transform 1.5s;
}

.panels:hover {
transform:skewY(3deg);
}

#panel1.clicked{
width:460;
height:290;
}





$('#panel1').on('click', function() {
$(this).toggleClass('clicked');
});

$(document).ready(main)

Answer

you are missing px

Change :

#panel1.clicked{
  width:460;
  height:290;
}

To :

#panel1.clicked{
  width:460px;
  height:290px;
}

Final code :

<!DOCTYPE html>
<html>
<head>
    <style>
        .panels {
                  position:relative;
                  border:2px solid silver;
                  transition:transform 1.5s;
                }

            .panels:hover {
              transform:skewY(3deg);
            }

        #panel1.clicked{
          width:460px;
          height:290px;
        }
    </style>
</head>
    <body>
        <div id='panelHolder'>
            <div id='panel1' class='panels'>DIV</div>
        </div>
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#panel1').on('click', function() {  
                $(this).toggleClass('clicked');
            })
        })
    </script>
    </body>
</html>