Accordion

by adam12wq

HTML

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW " crossorigin="anonymous "></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <title>Extra Info</title>
  </head>

  <body>
    <header></header>

    <div class="extrainfo_outerbackground">
      <div class="extrainfo_banner">
        <h3 class="form-heading">Lorem Ipsum</h3>
        <a href="javascript:void(0)" class="cp_exin_expandAll active" accordion-id="#accordion"></a>
      </div>
      <div class="clearfix"></div>
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
              </a>
            </h4>
          </div>
          <div...

CSS

body {
  color: #6a6c6f;
  background-color: green;
  margin-top: 30px;
}


.extrainfo_outerbackground {
  max-width: 960px;
  background-color: rgb(247, 245, 245);
  margin: 25px 0px 100px 200px;
  padding: 20px 0px 0px 0px;
}

.panel-default>.panel-heading {
  color: #333;
  background-color: #fff;
  border-color: #e4e5e7;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.panel-default>.panel-heading a {
  display: block;
  padding: 10px 15px;
}

.panel-default>.panel-heading a:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: right;
  transition: transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
  background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
  content: "\2212";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
  content: "\002b";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.extrainfo_banner {
  width: 100%;
  float: left;
  clear: both;
  margin: 25px 0px 100px 250px;
  border-radius: 3px;
}

.extrainfo_banner .form-heading {
  font-size: 60px;
  font-weight: bold;
  float: left;
  color: rgb(7 29 148);
  padding: 25px 0px 20px 0px;
  margin: 0;
}

.extrainfo_banner .cp_exin_expandAll {
  border: none;
  text-align: right;
  margin: 0px 55px 0px 0px;
  padding: 0px;
  color: rgb(22 58 255);
  font-family: Helvetica, sans-serif;
  font-size: 14px;
}

.extrainfo_banner .cp_exin_expandAll:before {
  content: "Expand All";
}

.extrainfo_banner .cp_exin_expandAll.active:before {
  content: "Collapse All";
}

JavaScript

var testing = {

  BContactUs: function() {
    var businessForm = document.getElementById('businesscontactus_form');
    const companyName = document.getElementById('companyName');
    const bRName = document.getElementById('bRName');
    const cPosition = document.getElementById('cPosition');
    const bEmail = document.getElementById('bEmail');
    const bMessage = document.getElementById('bMessage');

    businessForm.addEventListener('submit', e => {
      e.preventDefault();

      checkInputs();
    });

    function checkInputs() {
      // trim to remove the whitespaces
      const companyNameValue = companyName.value.trim();
      const bRNameValue = bRName.value.trim();
      const cPositionValue = cPosition.value.trim();
      const bEmailValue = bEmail.value.trim();
      const bMessageValue = bMessage.value.trim();

      if (companyNameValue === '') {
        setErrorFor(companyName, 'Company Name must be entered');
      } else {
        setSuccessFor(companyName);
      };

      if (bRNameValue === '') {
        setErrorFor(bRName, 'Name cannot be blank');
      } else {
        setSuccessFor(bRName);
      };

      if (bEmailValue === '') {
        setErrorFor(bEmail, 'Email cannot be blank');
      } else if (!isEmail(bEmailValue)) {
        setErrorFor(bEmail, 'Not a valid email');
      } else {
        setSuccessFor(bEmail);
      };

      if (cPositionValue === '') {
        setErrorFor(cPosition, 'C position cannot be blank');
      } else {
        setSuccessFor(cPosition);
      };

      if (bMessageValue === '') {
        setErrorFor(bMessage, 'Message cannot be blank');
      } else {
        setSuccessFor(bMessage);
      };
    };

    function setErrorFor(input, message) {
      const formControl = input.parentElement;
      const small = formControl.querySelector('small');
      formControl.className = 'bus-form-control error';
      small.innerText = message;
    };

    function setSuccessFor(input) {
      const formControl...