0

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

2
  • si utilizas jquery, tienes la opcion de usar $(...).show() y $(...).hide(), donde $(...) te servirá para buscar el objetivo a aplicar dicha operación. el 22 may. 2018 a las 11:44
  • Ojo, tienes ids repetidos, si los vas a usar como si fueran clases, emplea clases de verdad. lo digo por los id="mailTitle"
    – Montaycabe
    el 22 may. 2018 a las 12:10

1 respuesta 1

4

Lo mejor que puedes hacer es llamar al método slideToggle() que automáticamente te va a cambiar el estado entre visible y oculto tras cada pulsación.

Aquí tienes un ejemplo del funcionamiento de slideToggle()

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle();
    });
});
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
    cursor: pointer;
}

#panel {
    padding: 50px;
    display: none;
    cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

Si quieres hacerlo sin animación puedes utilizar show() y hide()

6
  • Funciona perfectamente. El único problema es que tendré que cambiar en este caso el nombre de las clases para que sean atómicas. Gracias!! el 22 may. 2018 a las 11:56
  • bueno pero para la próxima ya lo sabes antes de hacerlo, además así es la mejor manera si en el proyecto tienes jQuery
    – David
    el 22 may. 2018 a las 12:03
  • Por supuesto, muchas gracias David. el 22 may. 2018 a las 12:08
  • 1
    Deberías poner todo el código del ejemplo en la respuesta. Si el link se rompe la respuesta dejará de ser válida. Aunque sea copy/paste es mejor asegurarse :-) el 22 may. 2018 a las 12:09
  • 1
    Así mejor @VictorHerasmePerez
    – David
    el 22 may. 2018 a las 12:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.