Jump to content

Recommended Posts

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)'
}

 

Share this post


Link to post
Share on other sites

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)';
    }
}

 

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...