.toggleClass malfunctioning inexplicably

Question

.toggleClass malfunctioning inexplicably

I've been struggling to make a div box expand when clicked and revert to its original size when clicked again. It seems like a simple task, but no matter what I try, I can't seem to get it right. I'm not sure where I'm going wrong, as the problematic part of the code is quite short. Thank you for your help!
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)

javascript jquery html css hover

Answer 1

Answer №1

you need to add px after the numerical values for width and height

Change :

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

To :

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

Here is the updated 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>

Answer 2

you need to add px after the numerical values for width and height

Change :

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

To :

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

Here is the updated 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>

Answer 3

Answer №2

The dimensions remain constant because the unit px is absent from your width and height values. The toggle functionality is functioning properly.

Check out the revised demonstration here: https://jsfiddle.net/uL1r08am/2/

Answer 4

The dimensions remain constant because the unit px is absent from your width and height values. The toggle functionality is functioning properly.

Check out the revised demonstration here: https://jsfiddle.net/uL1r08am/2/

Answer 5

Answer №3

Make sure to enclose your javascript within the document ready function

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

Answer 6

Make sure to enclose your javascript within the document ready function

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

Answer 7

Answer №4

Have you considered using the addClass and removeClass methods?

$('#box1').click(function() {
  if ($('#box1').hasClass('active'))
     $('#box1').removeClass('active');
  else
     $('#box1').addClass('active');
});

Answer 8

Have you considered using the addClass and removeClass methods?

$('#box1').click(function() {
  if ($('#box1').hasClass('active'))
     $('#box1').removeClass('active');
  else
     $('#box1').addClass('active');
});

.toggleClass malfunctioning inexplicably

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to access the current webdriver instance using code?

What was the reason for needing to employ `toObject()` in mongoose to determine if an object contains a certain property?

Delay reading body until npm request completes

Animating transitions when hovering (using jQuery)

Enlarged text size disrupts alignment of ul menu items

Customized Box with MaterialUI Styling

The nth-of-type function behaving similarly to the nth-child function

Understanding CSS classes in ReactJS Material UI componentsJust wanted to clarify some things

Adjust the background color of the date and time selection tool

What is the process for creating a progress bar in PixiJS?

Tips for eliminating white frames or borders on the Mapbox canvas map

Steps for detecting a 401 Unauthorized error in SignalR when the token has expired

NuxtJs: Oops! It looks like NuxtError is not defined in this context

Unable to authenticate an HTML form using PHP and Apache 2

ReactJS component state fails to update accurately

Utilizing ng-click within ng-repeat along with $index

Executing Selenium WebDriver to interact with a hidden element

The classification of rejected promises in Typescript

Ensure that the Bootstrap image element maintains its full height without resizing

Using jQuery, send a post request to a page and then parse and handle