estoy intentando mostrar datos de una base de datos en elementos de tipo acordeón.
Lo que quiero conseguir es, cada vez que se pulse en el botón de la flecha, se despliegue o repliegue el contenido que hay después de ella.
Este es mi código que muestra los datos:
<div class="resumeDetailContainer liteBackground">
<div class="resumeDataName resumeCatTitle">
<div id="nameTitle" class="detailFormDataTitle liteBackground"><p class="titles" id="cvName"></p></div>
</div>
<div class="resumeDataPersonalData darkBackground resumeCatTitle">
<div id="personalDataTitle" class="detailFormDataTitle darkBackground ">
<p class="titles ninetyWidth leftCategory" id="cvDataTitle">Personal data</p>
<button class="fiveWidth rightCategory expandArrowButton " type="button" name="button"><img class="imgAddButton" src="../resources/icons/expand-arrow.png" alt=""></button>
</div>
<div class="dropDownData liteBackground">
<div class="dropdownContent">
<div class="resumeDataAddress">
<div id="addresstitle" class="halfDropdownItems leftDropdownItems">
<img src="../resources/icons/address-house.png" alt="" class="imgAddButton leftIcon">
<p id="cvAddress"></p>
</div>
</div>
<div class="resumeDataMail">
<div id="mailTitle" class="halfDropdownItems rightDropdownItems">
<img src="../resources/icons/mail.png" alt="" class="imgAddButton leftIcon">
<p id="cvMail"></p>
</div>
</div>
<div class="resumeDataPhone1">
<div id="mailTitle" class="halfDropdownItems leftDropdownItems">
<img src="../resources/icons/phone.png" alt="" class="imgAddButton leftIcon">
<p id="cvPhone1"></p>
</div>
</div>
<div class="resumeDataPhone2">
<div id="mailTitle" class="halfDropdownItems rightDropdownItems">
<img src="../resources/icons/phone.png" alt="" class="imgAddButton leftIcon">
<p id="cvPhone2"></p>
</div>
</div>
<div class="resumeDataBDate">
<div id="birthDateTitle" class="halfDropdownItems leftDropdownItems">
<img src="../resources/icons/calendar.png" alt="" class="imgAddButton leftIcon">
<p id="cvBDate"></p>
</div>
</div>
<div class="resumeMaritalStatus">
<div id="maritalTitle" class="halfDropdownItems rightDropdownItems">
<img src="../resources/icons/ring.png" alt="" class="imgAddButton leftIcon">
<p id="cvMarital"></p>
</div>
</div>
<div class="resumeChildren">
<div id="childrenTitle" class="halfDropdownItems leftDropdownItems">
<img src="../resources/icons/baby.png" alt="" class="imgAddButton leftIcon">
<p id="cvChildrenNumber"></p>
</div>
</div>
<div class="resumeSalaryExpectatives">
<div id="salaryTitle" class="halfDropdownItems rightDropdownItems">
<img src="../resources/icons/money.png" alt="" class="imgAddButton leftIcon">
<p id="cvSalaryExpectatives"></p>
</div>
</div>
</div>
</div>
<div class="resumeDataSkillsData darkBackground resumeCatTitle">
<div id="skillsTitle" class="detailFormDataTitle darkBackground">
<p class="titles ninetyWidth leftCategory" id="cvSkillstitle">Skills<p>
<button class="fiveWidth rightCategory expandArrowButton " type="button" name="button"><img class="imgAddButton" src="../resources/icons/expand-arrow.png" alt=""></button>
</div>
</div>
<div class="resumeDataStudiesData darkBackground resumeCatTitle">
<div id="studiesTitle" class="detailFormDataTitle darkBackground">
<p class="titles ninetyWidth leftCategory" id="cvStudiesTitle">Studies<p>
<button class="fiveWidth rightCategory expandArrowButton " type="button" name="button"><img class="imgAddButton" src="../resources/icons/expand-arrow.png" alt=""></button>
</div>
</div>
<div class="resumeDataExperienceData darkBackground resumeCatTitle">
<div id="experienceTitle" class="detailFormDataTitle darkBackground">
<p class="titles ninetyWidth leftCategory" id="cvExperienceTitle">Experience<p>
<button class="fiveWidth rightCategory expandArrowButton " type="button" name="button"><img class="imgAddButton" src="../resources/icons/expand-arrow.png" alt=""></button>
</div>
</div>
<div class="resumeDataExtraData darkBackground resumeCatTitle">
<div id="extraDataTitle" class="detailFormDataTitle darkBackground">
<p class="titles ninetyWidth leftCategory" id="cvPersonalDataTitle">Extra data<p>
<button class="fiveWidth rightCategory expandArrowButton " type="button" name="button"><img class="imgAddButton" src="../resources/icons/expand-arrow.png" alt=""></button>
</div>
</div>
<div class="resumeDataFilesData darkBackground resumeCatTitle">
<div id="filesTitle" class="detailFormDataTitle darkBackground">
<p class="titles ninetyWidth leftCategory" id="cvFilesDataTitle">Files<p>
<button class="fiveWidth rightCategory expandArrowButton " type="button" name="button"><img class="imgAddButton" src="../resources/icons/expand-arrow.png" alt=""></button>
</div>
</div>
<div class="resumeDriverLicenses">
<div id="resumeDriverLicenseA" class="detailFormDataTitle quarterWidth leftLabelText margin">Driver License A</div>
<div id="resumeDriverLicenseB" class="detailFormDataTitle quarterWidth centerLabelText margin">Driver License B</div>
<div id="resumeDriverLicenseC" class="detailFormDataTitle quarterWidth centerLabelText margin">Driver License C</div>
<div id="resumeDriverLicenseD" class="detailFormDataTitle quarterWidth rightLabelText margin">Driver License D</div>
</div>
<div class="resumeDataSkills">
<div id="resumeSkNav" class="detailFormDataTitle quarterWidth leftLabelText margin">Nav skill</div>
<div id="resumeSkSap" class="detailFormDataTitle quarterWidth centerLabelText margin">Sap skill</div>
<div id="resumeSkA3" class="detailFormDataTitle quarterWidth centerLabelText margin">A3 skill</div>
<div id="resumeSkOffice" class="detailFormDataTitle quarterWidth rightLabelText margin">Office skill</div>
</div>
<div class="resumeDataDepartment">
<div id="resumeDepartment" class="detailFormDataTitle halfWidth leftLabelText margin">Department</div>
</div>
<div class="resumeDataLanguages">
<div id="resumeLanguage" class="detailFormDataTitle halfWidth leftLabelText margin">Languages</div>
</div>
<div class="resumeDataExperience">
<div id="resumeExperience" class="detailFormDataTitle quarterWidth leftLabelText margin">Experience</div>
</div>
<div class="resumeDataStudies">
<div id="resumeStudies" class="detailFormDataTitle quarterWidth centerLabelText margin">Studies</div>
</div>
<div class="resumeDataInterviews">
<div id="resumeInterview" class="detailFormDataTitle quarterWidth centerLabelText margin">Interviews</div>
</div>
<div class="resumeDataFiles">
<div id="resumeFile" class="detailFormDataTitle quarterWidth rightLabelText margin">Files</div>
</div>
</div>
Ese código es llamado por una función de jQuery que se encargaría de mostrar o no los elementos:
$(function() {
var panel = document.getElementsByClassName("expandArrowButton");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
});
Mi primera pregunta es. ¿Por qué no funciona? Estoy intentando buscar tutoriales pero necesito saber por qué no funciona.
Si le digo: elemento(".dropdownData") por ejemplo, supongo que muestra todos los elementos de esa clase. Lo que quiero es que muestre el elemento adyacente al botón.
Gracias por todo
id="mailTitle"