Hallo, Heinz,
wozu denn dieses javascript.
Bootstrap collapse, bootstrap accordion bietet doch dies alles out-of-the-box.
Ich habe einmal zwei Dinge eingebaut, damit auch deutlich wird, was die verschiedenen Sprachen machen
1. Für Deutsch ein accordion
Code:
<div class="panel-group lang-de" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 data-bs-toggle="collapse" data-parent="#accordion" href="#collapse1" class="panel-title expand">
<div class="right-arrow pull-right">+</div>
<a href="#">Datenschutzerklärung</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
und dies für Englisch nur einfach collapse
Code:
<div class="row lang-en">
<a class="btn btn-info" role="button" data-bs-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Datenschutzerklärung
</a>
<div class="collapse" id="collapseExample">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Netus et malesuada fames ac turpis egestas integer. Sit amet volutpat consequat mauris. Fringilla est ullamcorper eget nulla facilisi. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Neque ornare aenean euismod elementum nisi. Bibendum neque egestas congue quisque egestas diam in arcu. Pretium quam vulputate dignissim suspendisse in est ante. Dictumst quisque sagittis purus sit. Odio eu feugiat pretium nibh ipsum.
Sodales ut etiam sit amet nisl purus in mollis. Sed ullamcorper morbi tincidunt ornare massa. Consectetur adipiscing elit duis tristique sollicitudin nibh si
</div>
</div>
</div>
Du siehst jeweils im ersten div die Klasse "lang-de" bzw. "lang-en"
in der "custom.css" kommt dann also noch hinein
Code:
:not(:lang(en)) .lang-en { display: none; }
:not(:lang(de)) .lang-de { display: none; }
Also: Wenn es nicht diese Sprache ist, wird ausgeblendet.
Und so etwas kann dann herauskommen:
Deutsch:
Englisch:
.
