0

Tengo hecho este acordión:

<div class="row">
<div class="col-md-4">
  <div class="accordion">
    <div class="panel-group" id="accordion1">
      <div class="panel panel-default">
        <div class="panel-heading active">
          <h4 class="panel-title"> <a id="manipulador"  class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"> Manipulador de alimentos <i class="fa fa-angle-right pull-right"></i> </a> </h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse in">
          <div class="panel-body">
            <div class="media accordion-inner">
              <div class="media-body">
                <ul class="indicecurso" data-curso="1" style="list-style:none;">
                  <li><img style="left:50px;position:absolute;" id="imgtest1" src="/images/check.png"/><a data-tema="1">1.  El manipulador de alimentos</a> </li>
                  <li><img style="left:50px;position:absolute;" id="imgtest2"/><a data-tema="2">2.  La alimentación y la higiene</a> </li>
                  <li><img style="left:50px;position:absolute;" id="imgtest3" /><a data-tema="3">3. Contaminación de alimentos</a> </li>
                  <li><img style="left:50px;position:absolute;"  id="imgtest4"/><a data-tema="4">4. Enfermedades alimentarias</a> </li>
                  <li><img style="left:50px;position:absolute;"  id="imgtest5"/><a data-tema="5">5. Prevención de enfermedades</a> </li>
                  <li><img style="left:50px;position:absolute;" id="imgtest6"/><a data-tema="6">6.  Desinsectación y desratización</a> </li>
                  <li><img style="left:50px;position:absolute;"  id="imgtest7"/><a data-tema="7">7. Locales y equipos</a> </li>
                  <li><img style="left:50px;position:absolute;"  id="imgtest8"/><a data-tema="8">8. Conservación</a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest9"/><a data-tema="9">9.  Proveedores y envasado</a></li>
                  <li><img style="left:50px;position:absolute;"  id="imgtest10"/><a data-tema="10">10.  APPCC</a> </li>
                  <li><img style="left:50px;position:absolute;"  id="imgtest11"/><a data-tema="11">11.  Ley de Información Alimentaria</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title"> <a id="altoriesgo" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1"> Manipulador de alto riesgo <i class="fa fa-angle-right pull-right"></i> </a> </h4>
        </div>
        <div id="collapseThree1" class="panel-collapse collapse">
          <div class="panel-body">
            <ul class="indicecurso" data-curso="2" style="list-style:none;">
              <li><img style="left:50px;position:absolute;" id="imgtest12" /><a data-tema="12">1.   Introducción</a> </li>
              <li><img style="left:50px;position:absolute;" id="imgtest13"/><a data-tema="13">2.    La cocina y los locales</a> </li>
              <li><img style="left:50px;position:absolute;" id="imgtest14" /><a data-tema="14">3.   Los aseos</a> </li>
              <li><img style="left:50px;position:absolute;" id="imgtest15" /><a data-tema="15">4.   El comedor y la barra </a> </li>
              <li><img style="left:50px;position:absolute;" id="imgtest16" /><a data-tema="16">5.   Almacenamiento y el manipulador </a> </li>
              <li><img style="left:50px;position:absolute;" id="imgtest17"/><a data-tema="17">6.    APPCC </a> </li>
              <li><img style="left:50px;position:absolute;" id="imgtest18" /><a data-tema="18">7.   Legislación</a> </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title"> <a id="alergenos" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1"> Alergenos <i class="fa fa-angle-right pull-right"></i> </a> </h4>
        </div>
      <div id="collapseThree1" class="panel-collapse collapse">
        <div class="panel-body">
          <ul class="indicecurso" data-curso="3" style="list-style:none;">
            <li><img style="left:50px;position:absolute;" id="imgtest12" /><a data-tema="12">1. Los alimentos </a> </li>
            <li><img style="left:50px;position:absolute;" id="imgtest13"/><a data-tema="12">2. Intolerancia y Alergia a los Alimentos </a> </li>
            <li><img style="left:50px;position:absolute;" id="imgtest14" /><a data-tema="14">3. La contaminación de los alimentos. La contaminación cruzada con alérgenos </a> </li>
            <li><img style="left:50px;position:absolute;" id="imgtest15" /><a data-tema="15">4. Plan de gestión de alérgenos. La importancia del reglamento </a> </li>
            <li><img style="left:50px;position:absolute;" id="imgtest16" /><a data-tema="16">5. 5. Seguridad alimentaria </a> </li>
            <li><img style="left:50px;position:absolute;" id="imgtest17"/><a data-tema="16">6.  Medidas de prevención y buenas prácticas </a> </li>
            <li><img style="left:50px;position:absolute;" id="imgtest18" /><a data-tema="18">7. Sistema APPCC </a> </li>
          </ul>
        </div>
      </div>
    </div>

Por alguna razón el tercero no se me muestra. ¿Alguna ayuda?

2
  • Edit: si que se me muestra lo que no se me desplegan los hijos que tengo puestos
    – user73543
    Commented el 20 feb. 2018 a las 17:33
  • 3
    Hola Juan, pero el código está incompleto, faltan los archivos de CSS y/o Javascript. Commented el 20 feb. 2018 a las 19:34

2 respuestas 2

1

Hay un problema con los idde los accordion, el segundo y el tercero lo tienen igual, debes cambiar el iddel tercer accordion y apuntar a ese id aquí tienes el código:

<!DOCTYPE html>


<html lang="en">

<head>


  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
  <div class="row">
    <div class="col-md-4">
      <div class="accordion">
        <div class="panel-group" id="accordion1">
          <div class="panel panel-default">
            <div class="panel-heading active">
              <h4 class="panel-title"><a id="manipulador" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"> Manipulador de
                            alimentos <i class="fa fa-angle-right pull-right"></i> </a></h4>
            </div>
            <div id="collapseOne1" class="panel-collapse collapse in">
              <div class="panel-body">
                <div class="media accordion-inner">
                  <div class="media-body">
                    <ul class="indicecurso" data-curso="1" style="list-style:none;">
                      <li><img style="left:50px;position:absolute;" id="imgtest1" src="/images/check.png" /><a data-tema="1">1. El manipulador de
                                            alimentos</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest2" /><a data-tema="2">2.
                                            La alimentación y la higiene</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest3" /><a data-tema="3">3.
                                            Contaminación de alimentos</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest4" /><a data-tema="4">4.
                                            Enfermedades alimentarias</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest5" /><a data-tema="5">5.
                                            Prevención de enfermedades</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest6" /><a data-tema="6">6.
                                            Desinsectación y desratización</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest7" /><a data-tema="7">7.
                                            Locales y equipos</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest8" /><a data-tema="8">8.
                                            Conservación</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest9" /><a data-tema="9">9.
                                            Proveedores y envasado</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest10" /><a data-tema="10">10.
                                            APPCC</a></li>
                      <li><img style="left:50px;position:absolute;" id="imgtest11" /><a data-tema="11">11.
                                            Ley de Información Alimentaria</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a id="altoriesgo" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1"> Manipulador de alto
                            riesgo <i class="fa fa-angle-right pull-right"></i> </a></h4>
            </div>
            <div id="collapseThree1" class="panel-collapse collapse">
              <div class="panel-body">
                <ul class="indicecurso" data-curso="2" style="list-style:none;">
                  <li><img style="left:50px;position:absolute;" id="imgtest12" /><a data-tema="12">1.
                                    Introducción</a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest13" /><a data-tema="13">2. La
                                    cocina y los locales</a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest14" /><a data-tema="14">3. Los
                                    aseos</a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest15" /><a data-tema="15">4. El
                                    comedor y la barra </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest16" /><a data-tema="16">5.
                                    Almacenamiento y el manipulador </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest17" /><a data-tema="17">6.
                                    APPCC </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest18" /><a data-tema="18">7.
                                    Legislación</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a id="alergenos" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree2"> Alergenos <i
                                class="fa fa-angle-right pull-right"></i> </a></h4>
            </div>
            <div id="collapseThree2" class="panel-collapse collapse">
              <div class="panel-body">
                <ul class="indicecurso" data-curso="3" style="list-style:none;">
                  <li><img style="left:50px;position:absolute;" id="imgtest12" /><a data-tema="12">1. Los
                                    alimentos </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest13" /><a data-tema="12">2.
                                    Intolerancia y Alergia a los Alimentos </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest14" /><a data-tema="14">3. La
                                    contaminación de los alimentos. La contaminación cruzada con alérgenos </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest15" /><a data-tema="15">4. Plan
                                    de gestión de alérgenos. La importancia del reglamento </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest16" /><a data-tema="16">5. 5.
                                    Seguridad alimentaria </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest17" /><a data-tema="16">6.
                                    Medidas de prevención y buenas prácticas </a></li>
                  <li><img style="left:50px;position:absolute;" id="imgtest18" /><a data-tema="18">7.
                                    Sistema APPCC </a></li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

Fíjate cómo he cambiado esta línea

<h4 class="panel-title"> <a id="alergenos" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1"> Alergenos <i class="fa fa-angle-right pull-right"></i> </a> </h4>

por esta:

<h4 class="panel-title"><a id="alergenos" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree2"> Alergenos <i class="fa fa-angle-right pull-right"></i> </a></h4>

En la pestaña "alérgenos"

y luego he cambiado la id también en la tercera pestaña:

<div id="collapseThree2" class="panel-collapse collapse">

1

el problema es con el id del 3er accordion que es el mismo que el del segundo, no deben repetirse

<div class="row">
<div class="col-md-4">
    <div class="accordion">
        <div class="panel-group" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading active">
                    <h4 class="panel-title"> <a id="manipulador"  class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"> Manipulador de alimentos <i class="fa fa-angle-right pull-right"></i> </a> </h4>
                </div>
                <div id="collapseOne1" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="media accordion-inner">
                            <div class="media-body">
                                <ul class="indicecurso" data-curso="1" style="list-style:none;">
                                    <li><img style="left:50px;position:absolute;" id="imgtest1" src="/images/check.png" /><a data-tema="1">1.  El manipulador de alimentos</a> </li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest2" /><a data-tema="2">2.  La alimentación y la higiene</a> </li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest3" /><a data-tema="3">3. Contaminación de alimentos</a> </li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest4" /><a data-tema="4">4. Enfermedades alimentarias</a> </li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest5" /><a data-tema="5">5. Prevención de enfermedades</a> </li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest6" /><a data-tema="6">6.  Desinsectación y desratización</a> </li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest7" /><a data-tema="7">7. Locales y equipos</a> </li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest8" /><a data-tema="8">8. Conservación</a></li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest9" /><a data-tema="9">9.  Proveedores y envasado</a></li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest10" /><a data-tema="10">10.  APPCC</a> </li>
                                    <li><img style="left:50px;position:absolute;" id="imgtest11" /><a data-tema="11">11.  Ley de Información Alimentaria</a> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title"> <a id="altoriesgo" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1"> Manipulador de alto riesgo <i class="fa fa-angle-right pull-right"></i> </a> </h4>
                </div>
                <div id="collapseThree1" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="indicecurso" data-curso="2" style="list-style:none;">
                            <li><img style="left:50px;position:absolute;" id="imgtest12" /><a data-tema="12">1.   Introducción</a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest13" /><a data-tema="13">2.    La cocina y los locales</a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest14" /><a data-tema="14">3.   Los aseos</a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest15" /><a data-tema="15">4.   El comedor y la barra </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest16" /><a data-tema="16">5.   Almacenamiento y el manipulador </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest17" /><a data-tema="17">6.    APPCC </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest18" /><a data-tema="18">7.   Legislación</a> </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title"> <a id="alergenos" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree2"> Alergenos <i class="fa fa-angle-right pull-right"></i> </a> </h4>
                </div>
                <div id="collapseThree2" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="indicecurso" data-curso="3" style="list-style:none;">
                            <li><img style="left:50px;position:absolute;" id="imgtest12" /><a data-tema="12">1. Los alimentos </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest13" /><a data-tema="12">2. Intolerancia y Alergia a los Alimentos </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest14" /><a data-tema="14">3. La contaminación de los alimentos. La contaminación cruzada con alérgenos </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest15" /><a data-tema="15">4. Plan de gestión de alérgenos. La importancia del reglamento </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest16" /><a data-tema="16">5. 5. Seguridad alimentaria </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest17" /><a data-tema="16">6.  Medidas de prevención y buenas prácticas </a> </li>
                            <li><img style="left:50px;position:absolute;" id="imgtest18" /><a data-tema="18">7. Sistema APPCC </a> </li>
                        </ul>
                    </div>
                </div>
            </div>

saludos

Tu Respuesta

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