Help With Collapsible Content

Help With Collapsible Content

Good Morning!!

First off, thank you for your help!! I am a volunteer for a Minor Hockey Association, trying to set up a webpage for our volunteers, and overall I really have absolutely no idea what I am doing... I was able to piece together the below by reading through forums and tutorials, but I have hit a wall and really need some help. Here is what I have so far:

  3. <!DOCTYPE HTML>
  4. <HTML>
  5. <HEAD>
  6. <TITLE>**** Volunteers</TITLE>
  7. <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  8. <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  9. <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  10. <STYLE TYPE="text/css">
  11. .form-style{
  12. max-width: 650px;
  13. background: #FAFAFA;
  14. padding: 30px;
  15. margin: 50px auto;
  16. box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
  17. border-radius: 10px;
  18. border: 6px solid #305A72;
  19. }
  20. .form-style ul{
  21. padding:0;
  22. margin:0;
  23. list-style:none;
  24. }
  25. .form-style ul li{
  26. display: block;
  27. margin-bottom: 10px;
  28. min-height: 35px;
  29. }
  30. .form-style ul li  .field-style{
  31. box-sizing: border-box; 
  32. -webkit-box-sizing: border-box;
  33. -moz-box-sizing: border-box; 
  34. padding: 8px;
  35. outline: none;
  36. border: 1px solid #B0CFE0;
  37. -webkit-transition: all 0.30s ease-in-out;
  38. -moz-transition: all 0.30s ease-in-out;
  39. -ms-transition: all 0.30s ease-in-out;
  40. -o-transition: all 0.30s ease-in-out;
  41. }
  42. .form-style ul li  .field-style:focus{
  43. box-shadow: 0 0 5px #B0CFE0;
  44. border:1px solid #B0CFE0;
  45. }
  46. .form-style ul li .field-split{
  47. width: 49%;
  48. }
  49. .form-style ul li .field-full{
  50. width: 100%;
  51. }
  52. .form-style ul li input.align-left{
  53. float:left;
  54. }
  55. .form-style ul li input.align-right{
  56. float:right;
  57. }
  58. .form-style ul li textarea{
  59. width: 100%;
  60. height: 100px;
  61. }
  62. .form-style ul li input[type="button"], 
  63. .form-style ul li input[type="submit"] {
  64. -moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
  65. -webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
  66. box-shadow: inset 0px 1px 0px 0px #3985B1;
  67. background-color: #216288;
  68. border: 1px solid #17445E;
  69. display: inline-block;
  70. cursor: pointer;
  71. color: #FFFFFF;
  72. padding: 8px 18px;
  73. text-decoration: none;
  74. font: 12px Arial, Helvetica, sans-serif;
  75. }
  76. .form-style ul li input[type="button"]:hover, 
  77. .form-style ul li input[type="submit"]:hover {
  78. background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
  79. background-color: #28739E;
  80. }
  81. </STYLE>
  82. </HEAD>
  83. <BODY>
  84. <TABLE STYLE="cellpadding: 0; cellspacing: 0; border-style: none; width: 100%;">
  85. <TBODY>
  86. <TR>
  87. <TD STYLE="padding: 3pt; width: 20%;">
  88. <IMG ALT="Name" SRC="logo_link">
  89. </TD>
  90. <TD STYLE="padding: 3pt; width: 80%;">
  91. <P STYLE="text-align: center; font-size: 18pt; font-family: Garamond, serif; color: #006bb5;">
  92. <STRONG>The ****** ****** Hockey Club<BR>
  93. <BR>
  94. <SPAN STYLE="text-align: center; font-size: 28pt; font-family: Garamond, serif; color: #006bb5;">
  95. 2017 **** VOLUNTEER DRIVE</STRONG>
  96. </SPAN>
  97. </P>
  98. </TD>
  99. <TD STYLE="padding: 3pt; width: 20%;">
  100. <IMG ALT="Name" SRC="logo_link">
  101. </TD>
  102. </TR>
  103. </TBODY>
  104. </TABLE>
  105. <BR>
  106. <P STYLE="text-align: center; font-size: 18pt; font-family: 'Segoe UI', sans-serif; color: #de3942;">
  107. <EM><STRONG>Tryouts aren't over... we are looking for a new team of volunteers!</EM></STRONG>
  108. </P>
  109. <BR>
  110. <DIV STYLE="border: 5px solid #006BB5; padding: 10px; border-style:groove;">
  111. <P STYLE="text-align: center; font-size: 14pt; font-family: 'Segoe UI', sans-serif; color: #000000;">
  112. <STRONG>But here is the good news - everyone who signs up makes the team!</STRONG>
  113. </P>
  114. <P STYLE="text-align: justify; font-size: 14pt; font-family: 'Segoe UI', sans-serif; color: #000000;">
  115. Blah, blah, blah... some flowery content here about why to be a volunteer, perks and benefits and all that...
  116. </DIV>
  117. <BR>
  118. <P STYLE="text-align: justify; font-size: 14pt; font-family: 'Segoe UI', sans-serif; color: #000000;">
  119. Use the form below to let us know if you are interested in becoming an **** Volunteer and where you want to help out. Click each title below for more information about the <SPAN STYLE="color: #de3942;"><STRONG>Volunteer Opportunities</STRONG></SPAN> that are currently available.
  120. </P>
  121. <FORM CLASS="form-style">
  122. <UL>
  123. <LI>
  124.     <INPUT TYPE="text" NAME="fname" CLASS="field-style field-split align-left" PLACEHOLDER="First Name" />
  125.     <INPUT TYPE="text" NAME="lname" CLASS="field-style field-split align-right" PLACEHOLDER="Last Name" />
  126. </LI>
  127. <LI>
  128. <INPUT TYPE="tel" NAME="phone" CLASS="field-style field-split align-left" PLACEHOLDER="Phone" />
  129. <INPUT TYPE="email" NAME="email" CLASS="field-style field-split align-right" PLACEHOLDER="Email" />
  130. </LI>
  131. <LI>
  132. <TEXTAREA NAME="about" CLASS="field-style field-full" PLACEHOLDER="Tell Us About Yourself"></TEXTAREA>
  133. </LI>
  134. <BR>
  135. <SPAN STYLE="font-size: 18pt; font-family: 'Segoe UI', sans-serif; color: #de3942;">
  136. <STRONG>Off-Ice Volunteer Opportunities</STRONG>
  137. </SPAN>
  138. <DIV DATA-ROLE="content" CLASS="ui-content" ROLE="main">
  139.     <DIV DATA-ROLE="collapsible" DATA-COLLAPSED="true" DATA-THEME="b" DATA-CONTENT-THEME="d" DATA-COLLAPSED-ICON="arrow-d" DATA-EXPANDED-ICON="arrow-u" CLASS="ui-collapsible ui-collapsible-inset ui-collapsible-collapsed">
  140.       <H3 CLASS="ui-collapsible-heading ui-collapsible-heading-collapsed"><INPUT TYPE="checkbox" NAME="skatesale" VALUE="skatesale">Opportunity One</H3>
  141.       <P>
  142. Date: Thu 26, 2017<BR>
  143. Time: Thurday 9am-5pm<BR>
  144. Location: *****<BR>
  145. Description: Outfitting ... prices.
  146. </P>
  147.     </DIV>
  148.   <DIV DATA-ROLE="collapsible" DATA-COLLAPSED="true" DATA-THEME="b" DATA-CONTENT-THEME="d" DATA-COLLAPSED-ICON="arrow-d" DATA-EXPANDED-ICON="arrow-u" CLASS="ui-collapsible ui-collapsible-inset ui-collapsible-collapsed">
  149.       <H3 CLASS="ui-collapsible-heading ui-collapsible-heading-collapsed"><INPUT TYPE="checkbox" NAME="ipequip" VALUE="ipequip">Opportunity Two</H3>
  150.       <P>
  151. Date: Thursday 2017<BR>
  152. Time: Thursday 9am-12pm<BR>
  153. Location: ******<BR>
  154. What it is: Help ... correctly.
  155. </P>
  156.     </DIV>
  157.   </DIV>
  158. </UL>
  159. </FORM>
  160. There will be some additional content going down here, but I haven't written it as of yet...
  161. </HTML>

I am having a few different issues here that I am in desperate need of some assistance on... So, the idea here is that people interested in volunteering for the association will fill out the form, check off which opportunities they are interested in, and submit the form. The issues that I having is with the JQuery functionality I am using to display those opportunities.

Side note - I trimmed this down to two for readability - at any given time there are 10 - 25 volunteer positions open.

Okay, issue number one is the checkbox. These collapsible sections are embedded inside a Form, as you can see, and I am trying to make each of the headings a checkbox. Or, just put a checkbox beside it. So that people can indicate which position they are applying for. It is not working as planned...

Second up is the formatting. This is my "I have no idea what I am doing" getting in the way, I think. As far as I can tell, the styling I have applied for the form (lines 10-81) are getting overwritten by the JQuery styles. To see the difference, remove lines 7, 8, and 9 and see what happens to the form fields (First Name, Last Name, etc). 

And last up, I have added " DATA-THEME" and "DATA-CONTENT-THEME" but they do not seem to work. If I set them both to "b" it will turn everything black, but that is it. I am trying to get theme "b" (I think...) - the theme that is primarily blue.

Please help!!!!

Thanks,
Nathan