michael2
9/11/2017 - 12:09 AM

Accordion - this is a accordion that customers will be able to self update. The HTML is a table with 2 columns and as many rows as needed. Y

Accordion - this is a accordion that customers will be able to self update. The HTML is a table with 2 columns and as many rows as needed. You just need to give the table a class of accordion.

accordion.js
content_copyfile_download
<script>
  
$('.accordion td:last-child').wrapInner('<div class="expand" />');

$( ".accordion tr" ).each(function() {
  $(this).click(function() {
    $(this).toggleClass('on');
  });
});

</script>
accordion.css
content_copyfile_download
.accordion * {
    -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.accordion tr {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
}

.accordion td {
  display: block;
  width: 100%;
}
.accordion td:last-child {
  overflow: hidden;
}
.expand {
  display: block;
  margin-top: -100%;

}
.accordion tr.on .expand {
  margin-top: 0;
}

.accordion td:first-child:before {
  content: "\f055";
  font-family: FontAwesome;
  margin-right: 10px;
  font-size: 1.6em;
  color: rgba(0,0,0,0.2);
}

.accordion tr.on td:first-child:before {
  content:  "\f056";

}
.accordion tr:hover td:first-child:before {
  color: rgba(0,0,0,0.1);
}
accordion table.html
content_copyfile_download
<table class="accordion" border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td>Put title here</td>
<td>Put drop down text in here. This is the text that is not shown to start but opens up when cloicked.</td>
</tr>
<tr>
<td>Put title here</td>
<td><strong></strong>Put drop down text in here. This is the text that is not shown to start but opens up when cloicked.</td>
</tr>
<tr>
<td>Put title here</td>
<td><strong></strong>Put drop down text in here. This is the text that is not shown to start but opens up when cloicked.</td>
</tr>
<tr>
<td>Put title here</td>
<td><strong></strong>Put drop down text in here. This is the text that is not shown to start but opens up when cloicked.</td>
</tr>
</tbody>
</table>