Hallo, ich bin neu hier und poste auch zum ersten mal, ich hoffe im richtigen Topic, weil es sich um eine html/js Frage handelt.
Ich habe einen html/css/js Code für eine collapsible accordion section, der auch gut funktioniert und den ich meinen Bedürfnissen nach angepasst/zusammengestückelt habe -
was ich jetzt noch schaffen möchte ist das die erste content card des accordions on page load geöffnet ist. Ich habe schon ein bisschen herumgespielt, und weiß dass
man es mit ein paar zeilen js code und IDs bei den content cards lösen könnte, schaffe es aber leider nicht es zum funktionieren zu bringen.
Vielleicht kann mir ja hier jemand helfen 
Liebe Grüße
Johanna
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #FFFFFF;
color: #4271DB;
cursor: pointer;
padding: 18px;
width: 100%;
border-style: none none solid none;
border-width: 1px;
border-color: #E8EAEF;
text-align: left;
outline: none;
font-size: 20px;
font-weight: bold;
font-family: "Open Sans"
}
.active, .collapsible:hover {
background-color: #FFFFFF;
}
.collapsible:after {
content: '\002B';
color: #4271DB;
font-weight: bold;
float: left;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #FFFFFF;
}
.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
</style>
</head>
<body>
<button class="collapsible"><span style='font-weight: 700; font-family: "Source Sans Pro"; font-size: 20px; color: rgb(000, 000, 000); padding-left: 47px;'>Marketing</button>
<div class="content">
<br>
<p style="float: left; padding-right: 20px; padding-bottom: 10px"><img src="https://altenstadt-zahnarzt.de/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg" class="responsive" height="200" width="400" border="1px"></p>
<p style="line-height: 22px;"><span style='font-weight: normal; font-family: "Source Sans Pro"; font-size: 16px; color: rgb(000, 000, 000);'>When it comes to customer communication the marketing team cannot hide their passion. Whether it's about strategic ideas and next steps, distributing the message via all paid online channels or press, working with influencers or setting up exciting new content, or making existing customers even more happy, the Marketing Team
always works as one big team, learning & developing together.</p>
<br>
<br>
</div>
<button class="collapsible"><span style='font-weight: 700; font-family: "Source Sans Pro"; font-size: 20px; color: rgb(000, 000, 000); padding-left: 47px;'>International Markets</button>
<div class="content">
<br>
<p style="float: left; padding-right: 20px; padding-bottom: 10px"><img src="https://altenstadt-zahnarzt.de/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg" class="responsive" height="200" width="400" border="1px"></p>
<p style="line-height: 22px;"><span style='font-weight: normal; font-family: "Source Sans Pro"; font-size: 16px; color: rgb(000, 000, 000);'>We are the experts for expansions throughout Europe! We continuously look into possible new markets and make all necessary preparations for launching in a new country. We also make sure we are well equipped and ready to scale our existing international markets.We work on market research and assessment, market entry, marketing localisation ,and product localisation through A/B testing on a daily basis..</p>
<br>
<br>
</div>
<button class="collapsible"><span style='font-weight: 700; font-family: "Source Sans Pro"; font-size: 20px; color: rgb(000, 000, 000); padding-left: 47px;'>Creative</button>
<div class="content">
<br>
<p style="float: left; padding-right: 20px; padding-bottom: 10px"><img src="https://altenstadt-zahnarzt.de/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg" class="responsive" height="200" width="400" border="1px"></p>
<p style="line-height: 22px;"><span style='font-weight: normal; font-family: "Source Sans Pro"; font-size: 16px; color: rgb(000, 000, 000);'>When it comes to implementing creative ideas, we are the ones to go to! We contribute to the further development and growth of refurbed and are experts in Branding, UX and UI, Video Production and Advertising. Anything that needs to be visualised, we make it happen!</p>
<br>
<br>
</div>
<script>
// toggle collapse of specified content
function toggleContent(content) {
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
}
// collapse all open content
function collapseAllOpenContent() {
const colls = document.getElementsByClassName('collapsible');
for (const coll of colls) {
if (coll.classList.contains('active')) {
coll.classList.remove('active');
toggleContent(coll.nextElementSibling);
}
}
}
const colls = document.getElementsByClassName('collapsible');
for (const coll of colls) {
coll.addEventListener('click', function() {
if (!this.classList.contains('active')) {
collapseAllOpenContent();
}
this.classList.toggle('active');
toggleContent(this.nextElementSibling);
});
}
</script>
</body>
</html>
