JOBS

document.addEventListener(‘DOMContentLoaded’, function() {
const container = document.getElementById(‘jobs-container’);

// Die XML-Datei von der URL abrufen
fetch(‘https://cors-anywhere.herokuapp.com/https://tmsgmbh.jobs.personio.de/xml’) // Wenn CORS-Probleme auftreten
.then(response => {
if (!response.ok) {
throw new Error(‘Netzwerkantwort war nicht ok’);
}
return response.text();
})
.then(str => {
const parser = new DOMParser();
const xml = parser.parseFromString(str, ‘application/xml’);

if (xml.getElementsByTagName(‘parsererror’).length) {
throw new Error(‘Fehler beim Parsen des XML.’);
}

// Alle Job-Elemente aus dem XML
const jobs = xml.querySelectorAll(‘position’);

jobs.forEach(job => {
const title = job.querySelector(‘name’).textContent;
const description = job.querySelector(‘job_description’).textContent;
const jobType = job.querySelector(‘type_of_employment’).textContent;
const location = job.querySelector(‘office’).textContent;

// Erstelle die HTML-Struktur für jeden Job
const jobBox = document.createElement(‘div’);
jobBox.classList.add(‘job-box’);

const jobTitle = document.createElement(‘button’);
jobTitle.classList.add(‘job-title’);
jobTitle.innerText = title;
jobTitle.setAttribute(‘aria-expanded’, ‘false’);

const jobDetails = document.createElement(‘div’);
jobDetails.classList.add(‘job-details’);
jobDetails.style.display = ‘none’;
jobDetails.innerHTML = `

Ort: ${location}

Beschäftigungsart: ${jobType}

${description}

`;

jobTitle.addEventListener(‘click’, function() {
const expanded = this.getAttribute(‘aria-expanded’) === ‘true’ || false;
this.setAttribute(‘aria-expanded’, !expanded);
jobDetails.style.display = expanded ? ‘none’ : ‘block’;
});

jobBox.appendChild(jobTitle);
jobBox.appendChild(jobDetails);
container.appendChild(jobBox);
});
})
.catch(error => {
console.error(‘Error fetching the XML:’, error);
container.innerHTML = ‘

Es gab ein Problem beim Laden der Job-Daten.

‘;
});
});

.job-box {
margin-bottom: 20px;
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
}

.job-title {
background-color: #0073aa;
color: white;
border: none;
padding: 10px;
width: 100%;
text-align: left;
font-size: 16px;
cursor: pointer;
}

.job-title[aria-expanded=”true”] {
background-color: #005177;
}

.job-details {
margin-top: 10px;
padding: 10px;
background-color: #f9f9f9;
}