Is it possible to give the Section Collapse header a different colour?

  • Profile Image
    Yoursimplewebsite
    Asked on April 10, 2019 at 11:26 PM

    Is it possible to give the Section Collapse header a different colour when it's visible (uncollapsed) compared to it's colour when it's invisible (collapsed), to make it stand out?



    This is a re-post of a comment on Show or Hide Multiple Fields at Once Using the Section Collapse Field

  • Profile Image
    Richie_P
    Answered on April 11, 2019 at 01:17 AM

    If you want to add an image in your collapse you may use this custom CSS:


    .form-collapse-table {

        height: 58px;
        border: 1px solid #ccc;
        background:url(https://wp-assets.futurism.com/2019/04/amazon-mothership-blimp-fake1-1200x630.png) repeat-x; /*you can change the URL with your image*/
        position: relative;

    }

    However, if you just want to change the color then you can replace the background CSS with this:

     background: red;

    Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Sample Screenshot:

    Sample Form:https://form.jotform.com/91000467930955

  • Profile Image
    Yoursimplewebsite
    Answered on April 11, 2019 at 05:19 PM

    Thanks Ritchie.  To confirm: this will cause the colour of the header to change between visible and invisible states, as per my question?

  • Profile Image
    Kevin_G
    Answered on April 11, 2019 at 06:36 PM

    Test the following CSS code: 

    When the collapse is closed: 

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

        background: orange;

    }


    When the collapse is opened: 

    .form-collapse-table {

        background: green;

    }

    I would recommend you to inject the code and test this on your end to see the result. 

    If you need further assistance, let us know. 

  • Profile Image
    Yoursimplewebsite
    Answered on April 14, 2019 at 09:14 PM

    Got it! Thanks very much!