NOTE: This is custom code to add to the code block in Dubsado forms.  Dubsado does not handle any support questions regarding custom code.  If you have any questions, it is best to ask our Facebook Community.

You can get this accordion style dropdown in your Dubsado form by using Dubsado's custom code option in Questionnaires, Proposals, and Lead Capture forms. 

You will need two code blocks to achieve this.  So click and drag two of them into your form:

1st code block has your content of the accordion: 

<div id="wrapper">
           
            <ul>
                <li>
                    <input type="checkbox" checked>
                    <i></i>
                    <h4>Your Topic Here </h4>
                    <p>description here description here description here description here description here description here description here description here description here </p>
                </li>
                       <li>
                    <input type="checkbox" checked>
                    <i></i>
                    <h4>Your Topic Here </h4>
                    <p>description here description here description here description here description here description here description here description here description here </p>
                </li>
        <li>
                    <input type="checkbox" checked>
                    <i></i>
                    <h4>Your Topic Here </h4>
                    <p>description here description here description here description here description here description here description here description here description here </p>
                </li>
        <li>
                    <input type="checkbox" checked>
                    <i></i>
                    <h4>Your Topic Here </h4>
                    <p>description here description here description here description here description here description here description here description here description here </p>
                </li>
        <li>
                    <input type="checkbox" checked>
                    <i></i>
                    <h4>Your Topic Here </h4>
                    <p>description here description here description here description here description here description here description here description here description here </p>
                </li>

            </ul>
        </div>

Then in a 2nd code block place the styling: 

<style>
#wrapper {
  min-height: 0;
  display: inline-block;
  position: relative;
  padding: 30px;
}
@media (max-width: 550px) {
  #wrapper {
    box-sizing: border-box;
    transform: translate(0, 0);
    max-width: 100%;
    min-height: 100%;
    margin: 0;
    left: 0;
  }
}
#wrapper h1,
#wrapper h2 {
  color: #000;
}
#wrapper h1 {
  margin: 10% auto 0;
  text-transform: uppercase;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 3px;
  font-weight: 100;
  text-align: center;
  display: table;
  padding: 10px 0;
  font-weight: bolder;
  border-bottom: 2px solid #000;
}
#wrapper h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
}
#wrapper p {
  color: rgba(48, 69, 92, 0.8);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 14px;
  z-index: 2;
  transition: all 500ms ease;
}
#wrapper p,
#wrapper ul li i:before,
#wrapper ul li i:after {
  transition: all 0.25s ease-in-out;
}
#wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#wrapper ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
#wrapper ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 9px;
  right: 0;
}
#wrapper ul li i:before,
#wrapper ul li i:after {
  content: "";
  position: absolute;
  background-color: #000;
  width: 3px;
  height: 16px;
}
#wrapper ul li i:before {
  transform: translate(2px, 0) rotate(45deg);
}
#wrapper ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
#wrapper ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
#wrapper ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
#wrapper ul li input[type=checkbox]:checked ~ i:before {
  margin-top: 9px;
  height: 9px;
  transform: translate(2px, 0) rotate(45deg);
}
#wrapper ul li input[type=checkbox]:checked ~ i:after {
  margin-top: 9px;
  height: 9px;
  transform: translate(-2px, 0) rotate(-45deg);
}
#wrapper ul li:nth-of-type(1) {
  border-top: none;
  animation-delay: 0.5s;
}
#wrapper ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
#wrapper ul li:nth-of-type(3) {
  animation-delay: 1s;
}
#wrapper ul li:last-of-type {
  padding-bottom: 0;
}
#wrapper li {
  animation: bounceInUp 1s ease both;
}
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

</style>

Did this answer your question?