I am trying to display data from a database in accordion type elements.
What I want to achieve is, each time the arrow button is clicked, the content after it will be displayed or retracted.
This is my code showing the data:
<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>
That code is called by a jQuery function that would be in charge of showing or not the elements:
$(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";
}
});
}
});
My first question is. Because it does not work? I'm trying to find tutorials but I need to know why it doesn't work.
If I tell it: element(".dropdownData") for example, I assume it shows all the elements of that class. What I want is for it to display the element adjacent to the button.
Thanks for everything
The best thing you can do is call the method
slideToggle()
that will automatically change the state between visible and hidden after each click.Here is an example of how slideToggle() works
If you want to do it without animation you can use
show()
andhide()