Akkordeon einrichten

Hallo allerseits,
ich habe vor, einige Bilder in die jeweiligen Akkordions zu platzieren.Die Akkordeons sollen sich jeweils ausfahren, dabei nicht über die anderen verlaufen(was sie im Moment noch tuen) und insgesamt groß genug sein damit man alle Bilder in senkrechter Reihenfolge sehen kann.
Hab mir dieses Akkordeon von wo anders geholt und verstehe es deshalb noch nicht allzu gut.

<div id="bereich6">
<div class="akkordeon">
<a href="#accord1">Zeichnungen</a>
<p id="accord1"><div id="monster"><img src="Bilder/monster.jpg"></div></p>
</div>
</div>

<div id="bereich7">
<div class="akkordeon">
<a href="#accord2">Photoshop</a>
<p id="accord2">Dieser Text ist normalerweise unsichtbar, ...</p>
</div>
</div>

<div id="bereich8">
<div class="akkordeon">
<a href="#accord3">Sonstiges</a>
<p id="accord3">Die Überschrift ist ein Link, der den ihm folgenden Absatz verweist.
Über das Pseudoelement :target wird beim Anspringen eines Absatzes ...
</p>
</div>
</div>

----------------------------
.akkordeon {
width: 100%;
background: rgb(234, 239, 255);
}

.akkordeon > a {
background: rgba(255,255,255,0.50);
color: black;
display: block;
padding: 2%;
text-decoration: none;
font-family: 'Oldenburg', cursive;
font-size:30px;
}

.akkordeon p {

overflow: hidden;
transition: max-height 1s;
padding: 0 0.2em;
margin: 0;
}
.akkordeon p {
max-height: 0;
transition: max-height 1s;
}

.akkordeon p:target {
max-height: 7em;
transition-delay: 0s;
}

#monster{
width:10px;
height:10px;
}