Add an accordion to a Gravityview List View

Below is an example of adding an accordion to a Gravityview list. This sample is taken from a customized online school module that was created during the covid-19 school closures. 

1
 

By adding some custom css, gravityview lists can be given accordion behavior. (This can be added through most WordPress themes, Apprearence Tabs, Custom CSS. Otherwise it can be added the style.css of your selected theme or better yet, your child theme. 

/*you may want to add the prefix of your gravityview class in fron of each class below(for example:
".gv-container-8400 input"with "8400" being the number of the gravityview)*/
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.row {
  display: -webkit-box;
  display: flex;
}
.row .col {
  -webkit-box-flex: 1;
          flex: 1;
}
.row .col:last-child {
  margin: 10px;
}

/* Accordion styles */
.tabs {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
border:solid #ccc 1px;
}

.tab {
  width: 100%;
  overflow: hidden;
}
.tab-label {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 1em;
  font-weight: bold;
  cursor: pointer;
  /* Icon */
}
.tab-label:hover {
  background: #eee;
}
.tab-label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
}
.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  -webkit-transition: all .35s;
  transition: all .35s;
  border-top:1px solid #ccc;
}
.tab-close {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}
.tab-close:hover {
  background: #1a252f;
}


input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
input:checked ~ .tab-content {
  max-height: 100vh;
  padding: 1em;
}
2
 

Next, you will need to create your Gravityview list type view.

3
 

Add a Custom Content field to your Gravityview Entries View.

4

Add the following HTML to this field:

<div class="row">
  <div class="col">
    <div class="tabs">
      <div class="tab">
         <input type="checkbox" id="chck{sequence}">
         <label class=tab-label" for="chck{sequence}">{Subject:34}</label>
         <div class="tab-content">{Message/Description:26}
         </div>
       </div>
     </div>
   </div>
 </div>

Notice the Gravityview generated merge tags that have been added. In this example, “{Subject:34} has been added in between the label tags.

The merge tag, {Message/Description:26} has been added between the div tags with the class “tab-content”.  

You can add your own content to these two sections to create both the accordion label and accordion body copy.