html 手风琴 - 这是一款手风琴，客户可以自行更新。 HTML是一个包含2列和所需行数的表。 ÿ

Posted 2021-05-11

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

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

</script>

.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);
}

<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>