Deine Frage wurde schon oft so oder so ähnlich im Forum gestellt. Leider gibt es keine direkte Möglichkeit, den Effekt mit den Mitteln des Web Designer zu erzeugen.
Aber Du kannst den Effekt selbst erzeugen, wenn Du ein paar Zeilen CSS- und HTML Code einbaust.

Hier findest Du eine online Demo (klick), die ich vor ein paar Monaten damit erstellt habe.
Hier gibt's die dazu gehörende Projektdatei (klick), für eigene Experimente.

Zu dem Thema gibt es jede Menge Kommentare-, Scriptbeispiele-, Demos-, etc. im WWW zu finden. Eine Seite hat mir besonders gut gefallen (klick), weil der da vorgestellte CSS/HTML Code leicht in den Web Designer zu übernehmen ist. Ich habe die Vorlage nahezu 1:1 für meine Demo übernommen.

Der Code für die einzelnen Textbereiche des Accordions muss als HTML Code im HTML Body der Seite abgelegt werden. Das muss also in jedem Fall manuell gemacht werden.

So sieht z., B. der Code für die Section 1 aus:

Den kompletten Code findest Du im HTML Body des Platzhalters in der Projektdatei.

Natürlich kannst Du es Dir einfach machen, und alle Formatierungsanweisungen der Demo übernehmen. Dann musst Du nur noch den Fließtext eintippen...

Ähnliches gilt für den CSS Code, in dem alle Formatierungen für das Accordion abgelegt sind. Du kannst Ihn nach Deinen Wünschen anpassen oder ihn 1:1 übernehmen und ihn so, wie er unten gezeigt wird, im HTML Head Deiner Seite ablegen:

----------------------------------------
<style type="text/css">
.accordion5 {
    width: auto;
    margin: 0 auto;
}

.accordion5 [type=radio],
.accordion5 [type=checkbox] {
    display: none;
}

.accordion5 label {
    color: #444;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #fff;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    display: block;
    margin: 3px 0 0;
    padding: 10px;
    background: linear-gradient(#fff,#929ba5);
    box-shadow: 0 1px 1px #000;
    transition: all 1s ease-in;
}

.accordion5 label:hover {
    background: linear-gradient(#fff,#b4bfcb);
    color: #444;
}

.accordion5 [type=radio]:checked ~ label,
.accordion5 [type=checkbox]:checked ~ label {
    background: linear-gradient(#fff,#b4bfcb);
    color: #5aff00;
    text-shadow: 1px 1px 0 #555;
}

.accordion5 label:before {
    content: '»';
    padding: 0 12px 0 5px;
}

.accordion5 [type=radio]:checked ~ label:before,
.accordion5 [type=checkbox]:checked ~ label:before {
    content: '-';
    padding: 0 14px 0 7px;
}

.accordion5 [type=radio]:checked ~ label + div,
.accordion5 [type=checkbox]:checked ~ label + div {
    overflow: auto;
    height: 17em;
    border-radius: 0 0 5px 5px;
}

.accordion5 div {
    height: 0;
    padding: 0 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #929ba5;
    transition: all 1s ease-in;
}

.accordion5 p {
    color: #333;
}

.accordion5 h3 {
    color: #444;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    padding: 5px 10px;
}
</style>
----------------------------------------

Wenn Du Dir zutraust, das in der Demo gezeigte Beispiel für Dein Projekt zu übernehmen, dann probier's mal. Und wenn dazu noch Fragen auftauchen, dann melde Dich einfach hier wieder.

Viel Erfolg