JS Animation to Flip Image

[kpcollier]

I have created Collapsible Sections as per the Caspio HowTo article. I am trying to use an image for the dropdown button. I am trying to 'flip' or turn the image 180deg while the section is open. I tried appending an if/then statement for if the section display is inline, flip the image, if not, keep it normal. I couldn't get it to work.

Here is the clickable image that opens the collapsed section.

<img src="https://img.icons8.com/metro/26/000000/double-down.png" onClick="Displayer(1)" style="width:20px;" class="estimatebuttons">

CSS:

.estimatebuttons {
  border-color: #21618C;
  color: white;
}

JS:

function Displayer(n)
{
var check = document.getElementById('Section'+n);
if(check.style.display == 'none')
{
check.style.display="inline";
}
else
{
check.style.display='none';
}
}

if (check.style.display == 'inline')
{
img.style.transform='rotate(180deg)'
}

 

[Alison]

Hello @kpcollier,

You should add a variable declaration for the img tag. This will allow you to assign styles to it.

Feel free to use the following JS code:
 

function Displayer(n) {
    var check = document.getElementById('Section' + n);
    var image = document.querySelectorAll('.estimatebuttons' + n)[0];

    if (check.style.display == 'none') {
        check.style.display = 'inline';
        image.style.transform = 'rotate(180deg)';
    } else {
        check.style.display = 'none'
        image.style.transform = 'rotate(0deg)';
    }
}

 

[kpcollier]

7 hours ago, Alison said:

Hello @kpcollier,

You should add a variable declaration for the img tag. This will allow you to assign styles to it.

Feel free to use the following JS code:
 

function Displayer(n) {
    var check = document.getElementById('Section' + n);
    var image = document.querySelectorAll('.estimatebuttons' + n)[0];

    if (check.style.display == 'none') {
        check.style.display = 'inline';
        image.style.transform = 'rotate(180deg)';
    } else {
        check.style.display = 'none'
        image.style.transform = 'rotate(0deg)';
    }
}

 

Thanks for the reply, @Alison! I tried out the script and couldn't get it to work. I'm getting an error, saying it cannot read the style property of undefined.

Here is how I have the image/dropdown button set up. Any idea?  The sections still collapse and expand, they just don't rotate.

<img src="https://img.icons8.com/windows/48/000000/circled-chevron-down.png" onClick="Displayer(5)" style="width:20px;" class="estimatebuttons">

<table id="Section5" style="display:none;"><td>

 

[kpcollier]

Cancel that. I changed the classes to IDs with a number and changed QuerySelectorAll to ElementById and it all works. Thanks again Alison.