Accordéons

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js">
</script>

<script type="text/javascript">

$(document).ready(function(){
        $("dt").click(function(){ // trigger
                $(this).next("dd").slideToggle("slow");
                $(this).children("a").toggleClass("closed open");
        });
});

</script>

<style type="text/css">
    dd { display: none;}
</style>

<dl>

    <dt>

        Mehr Informationen <a href="javascript:return false;" class="closed"> >> Details</a>

    </dt>

    <dd style="text-align: left;">

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean a massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus...

    </dd>

    ...

</dl>

EXEMPLE : https://www.uptimalperformance.fr/conseil-audit/conseil-lean-performance/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />

<script src="https://u.jimcdn.com/cms/o/sd2328d691f491b7c/userlayout/js/zodiacpro-302ffdwox422.js?t=1568019927" async="true" type="text/javascript"></script>

<style type="text/css">

/*<![CDATA[*/

/*** accordeon ***/

 ul.accordeon { padding: 0; list-style: none; margin: 0;  }

 li.accordeon_item{ list-style: none!important; }

.accordeon_item { margin-bottom: 0.5rem;  }

.active > .accordeon_title {  }

.active > .accordeon_title:after { content: '\f078'; }

.accordeon_title { cursor: pointer; padding: 0.8rem!important;  text-transform: uppercase;  background: #f0f0f0;  }

.accordeon_title:after { font-family: 'FontAwesome', sans-serif; float: right; content: '\f078'; }

h1.accordeon_title,h2.accordeon_title,h3.accordeon_title { text-align:left; }

.accordeon_content { padding: 0.8rem;  }

/*]]>*/

</style>