collapse with pure css

by T Lindig

HTML

<div class="entry">
  <h2>Damit das Start-up nicht zur Bruchlandung wird</h2>
  <div class="info">
    <div class="id">http://www.elrv.info/-1036</div>
    <div class="updated">2018-05-24T13:59:00+02:00</div>
    <div class="published">2018-05-24T13:59:00+02:00</div>
  </div>
  <label class="collapse">
    <input type="checkbox" class="toggle"/><i></i>
    <div class="summary" type="html">Wer für eine Idee brennt, verliert leicht rechtliche Fallstricke aus dem Blick. Gerade Existenzgründer laufen Gefahr, sich ganz auf ihr unternehmerisches Projekt zu konzentrieren und dabei mitunter als lästig empfundene rechtliche und bürokratische Hürden zu unterschätzen. Doch auch diese Hürden können zum Scheitern des Start-ups führen. Frühzeitig rechtliche Beratung und Informationsangebote in Anspruch zu nehmen, beugt dem vor.</div>
    <div class="content" type="html">
      Ehe Existenzgründer damit beginnen, ihre Geschäftsidee in die Tat umzusetzen, empfiehlt es sich dringend, sich Gedanken über die Rechtsform des Unternehmens zu machen. Selbst wenn sie ihre Idee oder ihr Produkt noch nicht unmittelbar auf dem Markt anbieten, treten sie meist schon im Rechtsverkehr auf: Sie mieten sich beispielsweise in Büroräume oder Coworking Spaces ein, kaufen Material oder Softwarelizenzen und werben Finanzmittel ein. Daher sollte gleich zu Beginn einer Existenzgründung ein Unternehmen im rechtlichen Sinne – häufig eine GmbH – gegründet werden, damit gleich alle Rechtsverhältnisse auf dieses Unternehmen laufen und nicht im Nachhinein Zuordnungsprobleme entstehen.&lt;br&gt;&lt;br&gt;Bei der Auswahl der richtigen Rechtsform für das Unternehmen unterstützen Notarinnen und Notare. Sie zeigen die Gestaltungsmöglichkeiten auf und beraten zu Vor- und Nachteilen. Ferner entwerfen sie die nötigen Verträge und kümmern sich nach der Beurkundung um die erforderlichen Eintragungen im Handelsregister. Gerade Jungunternehmer mit knapper Liquidität müssen sich nicht scheuen, die Expertise und...

CSS

.entry {
  display: block;
  padding: 15px;
  border-bottom: 1px solid black;
  margin-bottom: 15px;
}
.title {
  font-size: large;
}

.collapse .toggle {
  display:none;
}
.collapse .toggle + i:before {
  content:'\25BD mehr...';
}
.collapse .toggle:checked + i:before {
  content:'\25B3 ...weniger';
}

.collapse .summary {
  max-height: 100vh;
  overflow: auto;
  transition: max-height 0.5s ease;
}

.collapse .toggle:checked ~ .summary {
  max-height: 0;
  overflow: hidden;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.toggle:checked ~ .content {
  max-height: 100vh;
  overflow: auto;
}