Accordion Table v2

by Moses Pak

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <!-- Balloon.css package used for subjects tooltip -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">


    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js" type="text/javascript"></script>



  </head>

  <body>
    <h1 id="ScheduleInstructionDirectory">Schedule Instruction Directories</h1>
    <div>
      <p><span style="font-size:16px;">Not sure who to contact to schedule your instruction course? Use the 4 directories below to search for instruction coordinators and/or subject specialist librarians by subject expertise, name, library location, or affiliated departments/programs:</span></p>
    </div>
    <div id="ScheduleDirectory">
      <!-- Search by Subject Expertise -->
      <button class="accordion" id="SubjectExpertise"><span style="font-size:16px;">Search by Subject Expertise</span></button>
      <div class="panel">
        <div>
          <br>
          <div class="new-search-area" id="SubjectExpertiseSearchArea"></div><br>
          <div class="new-pagelength-area" id="SubjectExpertisePageLength"></div>
          <div>
            <table cellspacing="0" class="myTable datatables-table table...

CSS

/* CSS for accordion buttons */

	.accordion {
	  background-color: #eee;
	  color: #444;
	  cursor: pointer;
	  padding: 18px;
	  width: 100%;
	  border: none;
	  text-align: left;
	  outline: none;
	  font-size: 15px;
	  transition: 0.4s;
	}

	#ScheduleDirectory .active,
	.accordion:hover {
	  background-color: #ccc;
	}

	#ScheduleDirectory .accordion:after {
	  content: '\002B';
	  color: #777;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
	}

	#ScheduleDirectory .active:after {
	  content: "\2212";
	}

	.panel {
	  padding: 0 18px;
	  background-color: white;
	  height: 0px;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
	}

	/* End of CSS for accordion buttons */

	/* CSS for DataTables */

	* {
	  box-sizing: border-box;
	}

	#myInput {
	  background-image: url('/css/searchicon.png');
	  /* Add a search icon to input */
	  background-position: 10px 12px;
	  /* Position the search icon */
	  background-repeat: no-repeat;
	  /* Do not repeat the icon image */
	  width: 100%;
	  /* Full-width */
	  font-size: 16px;
	  /* Increase font-size */
	  padding: 12px 20px 12px 40px;
	  /* Add some padding */
	  border: 1px solid #ddd;
	  /* Add a grey border */
	  margin-bottom: 12px;
	  /* Add some space below the input */
	}

	.myTable {
	  border-collapse: collapse;
	  /* Collapse borders */
	  width: 100%;
	  /* Full-width */
	  border: 1px solid #ddd;
	  /* Add a grey border */
	  font-size: 18px;
	  /* Increase font-size */
	}

	.myTable th,
	.myTable td {
	  text-align: left;
	  /* Left-align text */
	  padding: 12px;
	  /* Add padding */
	}

	.myTable tr {
	  /* Add a bottom border to all table rows */
	  border-bottom: 1px solid #ddd;
	}

	.myTable tr.header {
	  /* Add a blue background color to the table header */
	  background-color: #add8e6;
	}

	/* hover over color CSS */

	table.dataTable.display tbody tr.child {
	  background: white;
	}

	table.dataTable.display tbody tr table tr:hover {
	  background: none;
	}

	/* end of...

JavaScript

var acc = document.getElementsByClassName("accordion");
	var i;

	for (i = 0; i < acc.length; i++) {
	  acc[i].addEventListener("click", function() {
	    this.classList.toggle("active");
	    var panel = this.nextElementSibling;
	    if (panel.style.height && panel.style.height !== '0px') {
	      panel.style.height = '0px';
	    } else {
	      panel.style.height = "auto";
	    }
	  });
	}

	// JS for SubjectExpertise

	$(document).ready(function() {

	  var table = $('#SubjectExpertiseDirectory').DataTable({
	    "data": testdata.data,
	    select: "single",
	    "columns": [{
	        "className": 'details-control',
	        "orderable": false,
	        "data": null,
	        "defaultContent": '',
	        "render": function() {
	          return '<i class="fa fa-plus-square" aria-hidden="true"><\/i>';
	        },
	        width: "15px"
	      },
	      {
	        "data": "subject"
	      }
	    ],
	    "order": [
	      [1, 'asc']
	    ],

	    language: {
	      search: ""
	    },

	    initComplete: function() {
	      $("#SubjectExpertiseDirectory_filter").detach().appendTo('#SubjectExpertiseSearchArea.new-search-area');
	      $("#SubjectExpertiseDirectory_length").detach().appendTo("#SubjectExpertisePageLength.new-pagelength-area");
	      $('#SubjectExpertiseDirectory_filter input').attr("placeholder", "Search coordinators by campus, library, name, phone number, or email.");
	    }

	  });

	  // Add event listener for opening and closing details
	  $('#SubjectExpertiseDirectory tbody').on('click', 'td.details-control', function() {
	    var tr = $(this).closest('tr');
	    var tdi = tr.find("i.fa");
	    var row = table.row(tr);

	    if (row.child.isShown()) {
	      // This row is already open - close it
	      row.child.hide();
	      tr.removeClass('shown');
	      tdi.first().removeClass('fa-minus-square');
	      tdi.first().addClass('fa-plus-square');
	    } else {
	      // Open this row
	      row.child(format(row.data())).show();
	     ...