How I can add dropdown effect in this javascript

Question

How I can add dropdown effect in this JavaScript? I want to add jQuery dropdown effect.

function myFunction() {
  document.getElementById("a-backgroundcolor3").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("#drop-minus-401557");
  filter = input.value.toUpperCase();
  div = document.getElementById("a-backgroundcolor3");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

<nav class="nav1 a-backgroundcolor3">
  <ul class="nav-list nav-hb a-bordercolor2 a-maxwidth1020px">
    <li class="a-backgroundcolor3"><a id="home" href="index.html" class="clickable" target="_self"><span
                                class="primary-font a-color2">Home</span></a></li>
    <li class="drop"><a id="about" href="about.html" class="clickable" target="_self"><span
                                class="primary-font a-color2">About Practice</span></a><i id="drop-minus-401557" class="fa fa-minus a-color2" data-partner="#drop-plus-401557" data-drop=".dropdownContain"></i><i id="drop-plus-401557" class="fa fa-plus active a-color2"
        data-partner="#drop-minus-401557" data-drop=".dropdownContain"></i>
      <div class="dropdownContain a-backgroundcolor3">
        <div class="dropOut">
          <ul>
            <li class="sideNav a-backgroundcolor3"><a href="contents/about/team.html" class="child-link clickable" id="About Practice_Team" target=""><span
                                                class="primary-font a-color2">Team</span><i
                                                class="fa fa-caret-right a-color2"></i></a><i id="side-minus-401557-404368" class="fa fa-minus a-color2" data-drop=".sideNavContain" data-partner="#side-plus-401557-404368"></i><i id="side-plus-401557-404368"
                class="fa fa-plus active a-color2" data-drop=".sideNavContain" data-partner="#side-minus-401557-404368"></i>
              <div class="sideNavContain">
                <div class="sideOut">
                  <ul>
                    <li class="a-backgroundcolor3"><a href="contents/about/team/management.html" class="clickable" id="Team_Management" target=""><span
                                                                class="primary-font a-color2">Management</span></a></li>
                    <li class="a-backgroundcolor3"><a href="contents/about/team/it-support.html" class="clickable" id="Team_IT Support" target=""><span
                                                                class="primary-font a-color2">IT Support</span></a></li>
                    <li class="a-backgroundcolor3"><a href="contents/about/team/advertising.html" class="clickable" id="Team_Advertising" target=""><span
                                                                class="primary-font a-color2">Advertising</span></a></li>
                    <li class="a-backgroundcolor3"><a href="contents/about/team/clinical-staff.html" class="clickable" id="Team_Clinical Staff" target=""><span
                                                                class="primary-font a-color2">Clinical Staff</span></a></li>
                    <li class="a-backgroundcolor3"><a href="contents/about/team/admin-staff.html" class="clickable" id="Team_Admin Staff" target=""><span
                                                                class="primary-font a-color2">Admin Staff</span></a></li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="a-backgroundcolor3"><a id="providers" href="provider.html" class="clickable" target="_self"><span class="primary-font a-color2">Providers</span></a></li>
    <li class="drop"><a id="services" href="services.html" class="clickable" target="_self"><span
                                class="primary-font a-color2">Services</span></a><i id="drop-minus-401556" class="fa fa-minus a-color2" data-partner="#drop-plus-401556" data-drop=".dropdownContain"></i><i id="drop-plus-401556" class="fa fa-plus active a-color2"
        data-partner="#drop-minus-401556" data-drop=".dropdownContain"></i>
      <div class="dropdownContain a-backgroundcolor3">
        <div class="dropOut">
          <ul>
            <li class="sideNav a-backgroundcolor3"><a href="services/back-pain.html" class="primary-font child-link clickable" id="Services_Back Pain" target="_self"><span class="primary-font a-color2">Back Pain</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="services/neck-pain.html" class="primary-font child-link clickable" id="Services_Neck Pain" target="_self"><span class="primary-font a-color2">Neck Pain</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="services/sciatica.html" class="primary-font child-link clickable" id="Services_Sciatica" target="_self"><span class="primary-font a-color2">Sciatica</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="services/neuropathy.html" class="primary-font child-link clickable" id="Services_Neuropathy" target="_self"><span class="primary-font a-color2">Neuropathy</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="services/fibromyalgia.html" class="primary-font child-link clickable" id="Services_Fibromyalgia" target="_self"><span class="primary-font a-color2">Fibromyalgia</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="services/arthritis.html" class="primary-font child-link clickable" id="Services_Arthritis" target="_self"><span class="primary-font a-color2">Arthritis</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="services/headaches.html" class="primary-font child-link clickable" id="Services_Headaches" target="_self"><span class="primary-font a-color2">Headaches</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="services/personal-injury.html" class="primary-font child-link clickable" id="Services_Personal Injury" target="_self"><span class="primary-font a-color2">Personal Injury</span></a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="a-backgroundcolor3"><a id="form" href="contents/form.html" class="clickable" target=""><span
                                class="primary-font a-color2">Form</span></a></li>
    <li class="drop"><a id="additional-services" href="contents/additional-services.html" class="clickable" target=""><span class="primary-font a-color2">Additional Services</span></a><i id="drop-minus-404038" class="fa fa-minus a-color2" data-partner="#drop-plus-404038"
        data-drop=".dropdownContain"></i><i id="drop-plus-404038" class="fa fa-plus active a-color2" data-partner="#drop-minus-404038" data-drop=".dropdownContain"></i>
      <div class="dropdownContain a-backgroundcolor3">
        <div class="dropOut">
          <ul>
            <li class="sideNav a-backgroundcolor3"><a href="contents/additional-services/pain-management.html" class="primary-font child-link clickable" id="Additional Services_Pain Management" target=""><span
                                                class="primary-font a-color2">Pain Management</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="contents/additional-services/independent-medical-exam.html" class="primary-font child-link clickable" id="Additional Services_Independent Medical Exam" target=""><span
                                                class="primary-font a-color2">Independent Medical Exam</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="contents/additional-services/weight-management.html" class="primary-font child-link clickable" id="Additional Services_Weight Management" target=""><span
                                                class="primary-font a-color2">Weight Management</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="contents/additional-services/diagnostic-services.html" class="primary-font child-link clickable" id="Additional Services_Diagnostic Services" target=""><span
                                                class="primary-font a-color2">Diagnostic Services</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="contents/additional-services/aesthetics-medicine.html" class="primary-font child-link clickable" id="Additional Services_Aesthetics Medicine" target=""><span
                                                class="primary-font a-color2">Aesthetics Medicine</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="contents/additional-services/regenerative-medicine.html" class="primary-font child-link clickable" id="Additional Services_Regenerative Medicine" target=""><span
                                                class="primary-font a-color2">Regenerative Medicine</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="contents/additional-services/personal-injury1.html" class="primary-font child-link clickable" id="Additional Services_Personal Injury" target=""><span
                                                class="primary-font a-color2">Personal Injury</span></a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="drop"><a id="patient-resource" href="javascript:void(0);" class="" target=""><span
                                class="primary-font a-color2">Patient Resource</span></a><i id="drop-minus-404131" class="fa fa-minus a-color2" data-partner="#drop-plus-404131" data-drop=".dropdownContain"></i><i id="drop-plus-404131" class="fa fa-plus active a-color2"
        data-partner="#drop-minus-404131" data-drop=".dropdownContain"></i>
      <div class="dropdownContain a-backgroundcolor3">
        <div class="dropOut">
          <ul>
            <li class="sideNav a-backgroundcolor3"><a href="contents/patient-resource/interactive-body-map.html" class="primary-font child-link clickable" id="Patient Resource_Interactive Body Map" target=""><span
                                                class="primary-font a-color2">Interactive Body Map</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="contents/patient-resource/new-patient-forms.html" class="primary-font child-link clickable" id="Patient Resource_New Patient Forms" target=""><span
                                                class="primary-font a-color2">New Patient Forms</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="javascript:void(0);" class="child-link " id="Patient Resource_Social Media" target=""><span
                                                class="primary-font a-color2">Social Media</span><i
                                                class="fa fa-caret-right a-color2"></i></a><i id="side-minus-404131-404333" class="fa fa-minus a-color2" data-drop=".sideNavContain" data-partner="#side-plus-404131-404333"></i><i id="side-plus-404131-404333"
                class="fa fa-plus active a-color2" data-drop=".sideNavContain" data-partner="#side-minus-404131-404333"></i>
              <div class="sideNavContain">
                <div class="sideOut">
                  <ul>
                    <li class="a-backgroundcolor3"><a href="contents/patient-resource/social-media/youtube.html" class="clickable" id="Social Media_Youtube" target=""><span
                                                                class="primary-font a-color2">Youtube</span></a></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="sideNav a-backgroundcolor3"><a href="contents/patient-resource/education-newsletter.html" class="primary-font child-link clickable" id="Patient Resource_Education Newsletter" target=""><span
                                                class="primary-font a-color2">Education Newsletter</span></a></li>
            <li class="sideNav a-backgroundcolor3"><a href="javascript:void(0);" class="primary-font child-link " id="Patient Resource_Patient Portal" target=""><span class="primary-font a-color2">Patient Portal</span></a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="a-backgroundcolor3"><a id="blog" href="blog.html" class="clickable" target="_self"><span
                                class="primary-font a-color2">Blog</span></a></li>
    <li class="drop"><a id="testimonials" href="testimonials.html" class="clickable" target="_self"><span
                                class="primary-font a-color2">Testimonials</span></a><i id="drop-minus-401560" class="fa fa-minus a-color2" data-partner="#drop-plus-401560" data-drop=".dropdownContain"></i><i id="drop-plus-401560" class="fa fa-plus active a-color2"
        data-partner="#drop-minus-401560" data-drop=".dropdownContain"></i>
      <div class="dropdownContain a-backgroundcolor3">
        <div class="dropOut">
          <ul>
            <li class="sideNav a-backgroundcolor3"><a href="contents/testimonials/review-us.html" class="primary-font child-link clickable" id="Testimonials_Review Us" target=""><span class="primary-font a-color2">Review Us</span></a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="drop"><a id="contact" href="contactus.html" class="clickable" target="_self"><span
                                class="primary-font a-color2">Contact</span></a><i id="drop-minus-401559" class="fa fa-minus a-color2" data-partner="#drop-plus-401559" data-drop=".dropdownContain"></i><i id="drop-plus-401559" class="fa fa-plus active a-color2"
        data-partner="#drop-minus-401559" data-drop=".dropdownContain"></i>
      <div class="dropdownContain a-backgroundcolor3">
        <div class="dropOut">
          <ul>
            <li class="sideNav a-backgroundcolor3"><a href="contents/contact/awards.html" class="primary-font child-link clickable" id="Contact_Awards" target=""><span
                                                class="primary-font a-color2">Awards</span></a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

Answer 1

if I am understanding you correctly, then you are asking if something can slide/dropdown. I would suggest a .slideDown() jQuery event.

Example running this on a click function:

$(".className").click(function(){

  $("#idName").slideDown();

})

Sorry if this isn't what you mean, but I hope this helps :D