CSS Selectors :before

Show element with border, 250px width:

.zippy {border: 1px solid black; display: inline-block; width: 250px;}
<div class="zippy">zippy</div>

Show there inner element, in black, with pointer-cursor:

.zippy > .title {background-color: black; color: white; padding: .1em .3em; cursor: pointer;}
<div class="zippy"><div class="title">zippy-title</div></div>

Show before title (combo is closed)

.zippy.closed > .title:before {content: '► ';}
<div class="zippy closed"><div class="title">zippy-closed-title</div></div>

Show the same, but open:

.zippy.opened > .title:before {content: '▼ ';}
<div class="zippy opened"><div class="title">zippy-opened-title</div></div>

It it's opened, show details

.zippy.opened > .body {display: block;}
.zippy.closed > .body {display: none;}

<div class="zippy opened">
    <div class="title">zippy-opened-title</div>
    <div class="body">Here are some details</div>
</div>
We need only change class "opened" to "close", to hide details and change ▼ to ►. We can do it with jQuery or the AngularJs: See Example for AngularJs here...