JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<section class="my-collapsible" ng-app="myApp" ng-controller="MainController">
    <input type="checkbox" class="my-toggle" id="{{id}}" ng-model="open" ng-checked="open" />
    <label class="my-section-header" for="{{id}}"><h3>{{ title }}</h3></label>
    <article class="my-article">
        <p>This is content</p>
        <p>{{content}}</p>
    </article>
</section>

CSS

.my-toggle {
    display: none;
}
.my-collapsible {
    border: 1px solid #ccc;
}
.my-section-header {
    margin: 0;
    background-color: #ccc;
    padding: 4px 8px;
    display: block;
}
.my-section-header h3 {
    padding: 0;
    margin: 0;
}
.my-article {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
}
.my-article p {
    padding: 4px 8px;
    margin: 0;
}
.my-toggle:checked ~ .my-article {
    height: 3.6em;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('MainController', function ($scope) {
    $scope.id = 'toggle0';
    $scope.open = true;
    $scope.title = 'Some Title';
    $scope.content = 'Some content. Lorem ipsum dolor sit amet.';
});