Block height animation (show/hide). # CSS animation + keyframes + min-height.

css.css

.ZdlmCA__do_show {
    font-size: 24px;
    color: rgb(251, 249, 240);
    background-color: rgb(206, 171, 61);
    height: 64px;
    text-align: center;
    line-height: 64px;
    margin: 32px 0;
    cursor: pointer;
}

.ZdlmCA__stated {
    max-height: 0;
    overflow: hidden;
}
[data-block-state="visible"] > .ZdlmCA__stated {
    -webkit-animation: expand 0.4s 1; /* Safari 4+ */
    -moz-animation:    expand 0.4s 1; /* Fx 5+ */
    -o-animation:      expand 0.4s 1; /* Opera 12+ */
    animation:         expand 0.4s 1; /* IE 10+, Fx 29+ */
    max-height: 6000px;
}

.ZdlmCA__block_heading-small-margin {
    margin-bottom: 12px;
}

.ZdlmCA__block[data-block-state="visible"] .ZdlmCA__do_show_block {
    display: none;
}

@-webkit-keyframes expand {
    0%   { opacity: 0; overflow: hidden; max-height: 0; }
    100% { opacity: 1; max-height: 2000px; overflow: visible; }
}
@-moz-keyframes expand {
    0%   { opacity: 0; overflow: hidden; max-height: 0; }
    100% { opacity: 1; max-height: 2000px; overflow: visible; }
}
@-o-keyframes expand {
    0%   { opacity: 0; overflow: hidden; max-height: 0; }
    100% { opacity: 1; max-height: 2000px; overflow: visible; }
}
@keyframes expand {
    0%   { opacity: 0; overflow: hidden; max-height: 0; }
    100% { opacity: 1; max-height: 2000px; overflow: visible; }
}

js.js

jQuery(document).ready(function (){
    jQuery(".ZdlmCA__do_show").click(function(e){
        e.preventDefault();
       jQuery(this).next().attr("data-block-state", "visible");
    });
    jQuery(".ZdlmCA__do_show_block").click(function(e){
        e.preventDefault();
       jQuery(this).parent().parent().attr("data-block-state", "visible");
    });
    jQuery(".ZdlmCA__do_hide_block").click(function(e){
        e.preventDefault();
       jQuery(this).parent().parent().parent().attr("data-block-state", "hidden");
    });
});

main.html

<div class="ZdlmCA__do_show" href="#show">Show block below >></div>

<div class="ZdlmCA__content" data-block-state="hidden">

    <div class="ZdlmCA__stated">
        <div class="ZdlmCA__block" data-block-state="hidden">
            <p class="ZdlmCA__block_heading-small-margin">
                <strong>Wieso ist das Bewerbungscoaching gratis?</strong>
                <a href="#aufklappen" class="ZdlmCA__do_show_block">(aufklappen)</a>
            </p>
            <div class="ZdlmCA__block_text ZdlmCA__stated">
                <p class="highlight2"><em>"Gratis? Kann gar nicht sein. Oder zumindest kann es dann
                nicht gut sein." Anders ausgedrückt: "Was nix kostet, ist auch nix wert!"</em></p>

                <p>Wir freuen uns darauf, Sie kennenzulernen! Freuen Sie sich auf Ihre perfekte Bewerbung und den neuen Job!</p>

                <p>
                    <a href="#aufklappen" class="ZdlmCA__do_hide_block">(Absatz zuklappen)</a>
                </p>
            </div>
        </div>

        <div class="ZdlmCA__block" data-block-state="hidden">
            <p class="ZdlmCA__block_heading-small-margin">
                <strong>Für wen ist das Bewerbungscoaching?</strong>
                <a href="#aufklappen" class="ZdlmCA__do_show_block">(aufklappen)</a>
            </p>
            <div class="ZdlmCA__block_text ZdlmCA__stated">

                <p>Wie auch immer Ihre Situation ist: <strong>Wir helfen Ihnen gern.</strong></p>

                <p>
                    <a href="#aufklappen" class="ZdlmCA__do_hide_block">(Absatz zuklappen)</a>
                </p>
            </div>
        </div>

    </div>
</div>