0

 var acc = document.getElementsByClassName("accordion");
                                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.maxHeight) {
                                      panel.style.maxHeight = null;
                                    } else {
                                      panel.style.maxHeight = panel.scrollHeight + "px";
                                    } 
                                  });
                                }
.accordion {
          background-color: #eee;
          color: #444;
          cursor: pointer;
          padding: 18px;
          width: 80%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
          transition: 0.4s;
        }

        .active, .accordion:hover {
          background-color: #ccc;
        }

        .accordion:after {
          content: '\002B';
          color: #777;
          font-weight: bold;
          float: right;
          margin-left: 5px;
        }

        .active:after {
          content: "\2212";
        }

        .panel {
          padding: 0 18px;
          background-color: white;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
          color: black;
            max-width: 80%;

        }

         .panel p {
            color: red;
        }
<div class="general">
                                <button class="accordion">tarifa general</button>
                                <div class="panel">
                                  <p>tratamiento 1  100€</p>
                                  <p>tratamiento 2 500€</p>
                                  <p>tratamiento 3 350€</p>
                                  <p>tratamiento 4 450€</p>
                                </div>

                                <button class="accordion">tarifa jubilados</button>
                                <div class="panel">
                                  <p>tratamiento 1  80€</p>
                                  <p>tratamiento 2 400€</p>
                                  <p>tratamiento 3 300€</p>
                                  <p>tratamiento 4 400€</p>
                                </div>
                            </div>

quisiera cambiar y no se como: -tarifa general y tarifa jubilados poner el texto en negro y alineado verticalmente al centro de su franja gris -el submenu que aparece con fondo blanco, centrado sobre la franja gris de sus tarifas

gracias de antemano

2
  • En el código expuesto veo que ya sabes como cambiar el color de texto, no hay mas que decir de eso, sobre la alineación vertical, prueba con display flex el 7 jul. 2020 a las 16:08
  • no funciona, el texto aparece blanco y lo necesito negro, el codigo es copiado, he probado mil cambios pero no los ejecuta
    – Basicmix
    el 7 jul. 2020 a las 16:12

1 respuesta 1

0

Solo necesitas modificar la clase acordion que es la clase de los botones. Ya está alienado verticalmente, así que supongo que te referías a una alineación horizontal.

.accordion {
          background-color: #eee;
          color: #000;  /* Este es el color del texto */
          cursor: pointer;
          padding: 18px;
          width: 80%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
          transition: 0.4s;
          text-align: center; /* alineación horizontal */
        }

Tu Respuesta

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

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