Change section collapse arrow icon using CSS code

I am looking to change the section collapse icon to something more modern like this: https://www.iconfinder.com/icons/308968/arrow_up_collapse_icon

I would like to to point sideways when collapsed and down when expanded. Basically the same functionality as the native options except with a more modern icon. Even easier would be if jotform would just update the icon to something more modern.

Any help is greatly appreactied!

Hello Ryan,

Thanks for reaching out to Jotform Support. To change the section collapse arrow icon please inject the CSS code below into your form:

.form-section-closed .form-collapse-table:after {

  transform: rotate(-90deg);

}

.form-collapse-table:after {

  content: "";

    background-image: url(https://www.jotform.com/uploads/CJ_G/form_files/arrow-down-sign-to-navigate.63046b15b1f993.08677929.png);

  position: absolute;

  background-size: 28px;

  width: 28px;

  height: 28px;

  right: 20px;

}

Here's a demo video on how it will work.

Give it a try and let us know if you need help.

I'm seeing several issues, See image:

1) The old icon is still showing. The original collapse icon in my form is different than the icon shown in the video.

2) The alignment is a bit too high. How do I make it lower, I tried adjusting the width, height, etc.

3) The icon is repeating itself. I changed the background-size to 20px and it is showing a repeat of the icon beside and below.

Hello Ryan,

Thank you for your feedback. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding.

Hello Ryan,

Thanks for patiently waiting, we appreciate it. Can you please try this CSS code and see how it goes?

.form-collapse-right-hide {

    visibility: hidden !important;

}

.form-collapse-right-show {

    visibility: hidden !important;

}





.form-section-closed .form-collapse-table:after {

    margin-top: 10px;

}

.form-collapse-table:after {

    margin-top: 20px;

}

Here's my cloned form: https://form.jotform.com/222413557850960

Give it a try and reach out again if you have any other questions.

Works great! Thank you!

This no longer works. Is there a solution?

Please add the following CSS codes to your form.

.form-section-closed .form-collapse-table:after {

  transform: rotate(-90deg);

}

.form-collapse-table:after {

  content: "";

    background-image: url(https://www.jotform.com/uploads/CJ_G/form_files/arrow-down-sign-to-navigate.63046b15b1f993.08677929.png);

  position: absolute;

  background-size: 20px;

  width: 28px;

  height: 28px;

  right: 20px;

  background-repeat: no-repeat;

}

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : left;

    width : 100%;

}

.qq-uploader {

    margin : 0 auto;

}

.form-collapse-right-hide {

    visibility: hidden !important;

}

.form-collapse-right-show {

    visibility: hidden !important;

}



.form-section-closed .form-collapse-table:after {

    margin-top: 10px;

}

.form-collapse-table:after {

    margin-top: 20px;

}

When done correctly, it should work similar to this test form https://form.jotform.com/230215974594967

This worked. But it has caused an issue with the mobile app. When using the app, the section headers lose their formatting. The gray, raised sections are changed to lines and white background. See below image versus what you have above.

Hi Ryan,

Thanks for getting back to us. Please add the following CSS code to your form as well:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.form-collapse-table {

    display: flex;

}}

After you add it, the form should look like this on mobile devices.

Give it a try and let us know if you need any other help.