What widget is used on this form to expand the conditions?

Do you know what widet is used on this form to expand the
conditions or maybe one similar
http://form.jotformpro.com/form/52071482370955?

Are you referring to the field displaying 'Click to Open.....' on the form? 

If so, it is the section collapse field that you can find from the page elements. Please refer to the guide below:

https://www.jotform.com/help/297-Show-or-Hide-Multiple-Fields-at-Once-Using-the-Section-Collapse-Field

Hope this information helps! 

Thank you!
...

Hi,
Thank you for the collapse section field. I am not sure how to get it to
function so that when someone clicks it opens to display text. Also can it
be controlled with CSS to get it to look like my other buttons?
...

I got it to function the way I want. Can it be styled with CSS like my other buttons?

I have checked your JotForm and see that the Section collapse field is already displaying with the button color.

Could you let us know if you are looking for something specific so that we can assist you further?

Thanks!

Yes I got the color the same. I am trying to match the text and the remove
the radius and line from it so I looks like my submit and upload buttons.
...

Please inject the following CSS code to the form to change the display of the section collapse field.

#collapse_41 {

    color: #fffdfd !important;

    background: #000000;

    width: 25%;

}

.form-collapse-mid {

    font-family: "Lato", sans-serif;

    font-size: 12px;

    font-weight: normal;

}

.form-collapse-right-hide, .form-collapse-right-show  {

display: none;

}

This is how the section will be displayed after injecting the CSS code.

Thank you!

Hi,
Thank you but I still see a borer or padding around it and I have lost the
arrow to expand the section.
...

Can someone help and tell me what css I need to remove to get try to put
the code provided again. I would also like the move the bevel button. So it
is same as style as the upload button.
...

Just insert the custom CSS code in your form designer>css.

#collapse_41 {

    color: #fffdfd !important;

    background: #000000;

    width: 25%;

}

.form-collapse-mid {

    font-family: "Lato", sans-serif;

    font-size: 12px;

    font-weight: normal;

}

.form-collapse-right-hide, .form-collapse-right-show  {

display: none;

}

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

Here is a sample screenshot after adding the custom CSS:

Please give it a try and let us know how it goes.

Thank you.

Thank you that worked. I am trying to fix a few more things. I lost 'no
file chosen as the I made the box bigger. I want to remove the radius or
border that is on click to view terms and conditions. I want it to resemble
the size of upload. And was wondering if it is possible to change the text
in the two spots so they resemble the rest of the form.
...

You can add this css code to remove the border on the view terms and condition.

.form-collapse-table{
  border: none!important;
}

To clarify, you want to match the upload button with your view terms and condition button?

#collapse_41 {
  
    width: 100px!important;
}

#collapse-text_41 {

        font-size: 10px!important;
        margin-top: -5px!important;

}

Please give it a try and let us know how it goes.

Thank you.

The opposite. I want the terms and conditions to match the upload. The look
the size is fine. But is has issues on mobile. I have attached a screenshot
...

...

I checked your form and it look like this.

It seems the custom CSS codes you have injected on the form have become dirty already and causes broken styles in the upload field and section collapse.

Can you please clarify what exactly are the customization you need?

Your previous response did not include the screenshot image you mentioned. Please upload the image again following this guide when you reply again.

User guide: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

We will wait for your updated response.

---

The other question was about a different issue. We will resolve it on another thread here https://www.jotform.com/answers/1501076

Thank you.

Hi,
I am trying to get the 'Click to view terms & conditions box to look the
same as the upload or drag file here. I have also lost the no file selected
...

To clarify, you want to change the size of the terms and conditions box in mobile view?

You can add these custom CSS codes in your Form Builder>CSS

@media only screen and (max-width:480px){
  #collapse_41 {
  
    width: 95px!important;
    height: 90px!important;
}
#collapse-text_41 {
    margin-top: -4px!important;
    font-size: 10px!important;
}
 
    }

Guide:How-to-Inject-Custom-CSS-Codes

Sample Screenshot:

Please give it a try and let us know how it goes.

Thank you.

I am trying to get the terms and conditions box to match the upload box.
And also bring back the drop down around that was on the collapse section
of the terms and conditions.
...

Please remove the following CSS code from your JotForm so that the arrow shall be displayed for the section collapse field.

.form-collapse-right-hide, .form-collapse-right-show  {

display: none;

}

And add the following CSS code to the form so that the Section collapse field should be displaying as the upload button.

.form-collapse-table {

border: none !important;

-webkit-box-shadow: none !important;

box-shadow: none !important;

border-radius: 0px !important;

}

Thanks!

Thank you. That worked. A couple more minor issues.

I have checked your custom CSS and you have edited the content in your upload text that is why the no file selected cannot be viewed. You can however, view it when you hover your mouse over the button.

To move the Click and view terms & conditions, you can try this code.

#collapse_41 {
        margin-left: 30px!important;
}

To change the font family you can use this css code.

ul#section_41.form-section{
  font-family : lato;
    font-weight : normal;
    font-size : 8pt;
}

Please give it a try and let us know how it goes.

Thank you.

That worked. So just be be clear the text for no file chosen can't be move to right?  Also I notice on the collapse section the arrow to expand shows but when you preview the form or use it live it is not visible. 

Yes, the no file chosen text is behind your button and cannot be moved as it is overlapped by the content.

Regarding the arrow in your collapse, it is an image and the only way we can add is to provide a new image URL.

.form-collapse-right-hide {
    background : url(https://cms.jotform.com/uploads/image_upload/image_upload/global/60105_Arrowimage.png) no-repeat left !important;
    padding-left : 15px;
}

Please give it a try and let us know how it goes.

Thank you.

The image suggestion did not work. Also the box is not displaying correctly on mobile.

I have fixed the issue with the arrow in the section collapse field on your form.

Please check and let us know if you need any further assistance. We will be happy to assist. 

Thank you Kiran. For some reason the box is not resizing for mobile. Is there any code that can be injected?

I'm not sure I understood your question correctly. Can you please specify what "box" is not resizing in mobile view?

Here is the screenshot of your form:

We will wait for your response.

Thank you.

The click to view terms. It is getting distorted as seen in screen shot.
...

I have added the following CSS code to your form so that the section collapse field should be displaying correctly in the mobile devices.

@media screen and (min-width: 10px) and (max-width: 540px){

#collapse_41 {

   width: 70% !important;

   margin-left: 0px !important;

}

}

This is how it should be displaying on mobile devices.

Thanks!