Problem with Javascript

Santietsit · December 17, 2023

Hi,

I am trying to add a FAQ to my website, and I have included css and js code throguth "Classydevs Custom CSS and JS" free module.

The link to the page in question is: https://patitasco.com/content/8-faq-preguntas-frecuentes

For some reason, I can expand the content of the accordion once, but after that, it does not work. Can I get some advice?

The code I have included is as follow:

HTML

<div class="container">
<h1>Preguntas Frecuentes (FAQ's)</h1>
<p class="text">En Patitas&amp;co, estamos comprometidos con el bienestar y la felicidad de tus mascotas. Sabemos que cada dueño de perro o gato tiene preguntas únicas y específicas sobre cómo cuidar mejor a sus compañeros peludos.</p>
<p class="text">Por eso, hemos recopilado una lista de las preguntas más frecuentes que recibimos, junto con respuestas detalladas de nuestro equipo experto. Ya sea que tengas dudas sobre nuestros productos, servicios, o necesites asesoramiento sobre la nutrición y el cuidado de tus mascotas, estamos aquí para ayudarte.</p>
<p class="text">¡Explora nuestras FAQ y descubre todo lo que necesitas saber para hacer la vida de tu mascota más feliz y saludable!</p>
<div class="accordion">
<div class="accordion-item"><button id="accordion-button-1"> <span class="accordion-title">¿Cuenta Patitas&amp;co con una ubicación física además de la tienda en línea?</span> <span class="icon"></span> </button>
<div class="accordion-content">
<p>¡Sí! En Patitas&amp;co valoramos la cercanía con nuestros clientes, por lo que además de nuestra tienda online, tenemos una tienda física ubicada en la Calle Fuencarral 166, Madrid. Nuestra presencia física nos permite obtener información directa sobre las necesidades y tendencias actuales de nuestros clientes.</p>
</div>
</div>
<div class="accordion-item"><button id="accordion-button-3"><span class="accordion-title"> ¿Puedo encontrar los mismos productos en la tienda física y en la tienda online?</span> <span class="icon"></span> </button>
<div class="accordion-content">
<p>Sí, nuestra gama de productos en la tienda física y online es muy similar. Sin embargo, algunas ofertas o productos exclusivos pueden variar entre ambas (como Gosbi, que solo se permite vender en tienda física).</p>
</div>
</div>
<div class="accordion-item"><button id="accordion-button-4"> <span class="accordion-title">¿Qué opciones de pago están disponibles?</span> <span class="icon"></span> </button>
<div class="accordion-content">
<p>Nuestra página web acepta ApplePay, GooglePay, tarjetas de crédito/débito, Amex, PayPal. </p>
</div>
</div>
<div class="accordion-item"><button id="accordion-button-5"> <span class="accordion-title">¿Cuánto tiempo tarda el envío de los productos?</span> <span class="icon"></span> </button>
<div class="accordion-content">
<p>Los envíos suelen tardar entre 2 y 3 días hábiles, y trabajamos con MRW. En fechas donde las agencias de transporte están saturadas (blackfriday, y navidad), puede haber algo más de demora. </p>
<p>Para aquellos pedidos que son para recoger en tienda, tardamos en elaborarlos unas pocas horas.</p>
<p><button><span class="accordion-title">¿Cómo puedo devolver un producto?</span><span class="icon"></span></button></p>
<div class="accordion-content">
<p>Los productos pueden devolverse dentro de los 30 días siguientes a la compra, acércalo a nuestra tienda física o contáctanos para la devolución online (un agente de mensajería la recogerá en tu domicilio).</p>
<p>No ponemos absolutamente ningún problema siempre que el producto no esté manipulado (tu satisfacción y que tu mascota esté bien alimentada es nuestra prioridad).</p>
<p></p>
</div>
</div>
</div>
</div>
</div>

CSS

body{
  font-family: Open Sans;
}
#left-column {
    display: none;
}
.page-header h1{
	display: none;
}

.main-about-sec {
    padding: 0px 0px;
}
.text{
	padding-top: 25px;
  	padding-bottom: 25px;
}
.dog-image {
    background-image: url(https://static.wixstatic.com/media/913019_624cc9fc93b842638171abba63c6f44b~mv2_d_3579_1369_s_2.jpg/v1/fill/w_1189,h_559,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/913019_624cc9fc93b842638171abba63c6f44b~mv2_d_3579_1369_s_2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.natural-dog-detail {
    --brw: 0px;
    --brd: 50, 65, 88;
    --bg: 254, 199, 79;
    --rd: 0px;
    --shd: none;
    --alpha-bg: 0.86;
    --alpha-brd: 1;
    --boxShadowToggleOn-shd: none;
    background-color: var(--container-corvid-background-color, rgba(var(--bg, var(--color_11)), var(--alpha-bg, 1)));
}

.dog-image-main {
    padding-top: 5px;
    padding-bottom: 30px;
}

.natura {
    font-size: 24px;
    font-weight: 700;

    font-family: "Questrial";
    max-width: 156px;
    width: 100%;
    margin: 0 0;
  color: black;
}

.paragraph {
    font-size: 16px;
    line-height: 30px;
    font-family: "Questrial";
    margin-bottom: 20px;
    position: relative;
    letter-spacing: 0.5px;
    max-width: 233px;
    width: 100%;
    font-weight: 300;
  color: black;
}

.paragraph2 {
    font-size: 16px;
    line-height: 30px;
    font-family: "Questrial";
    margin: 0;
    position: relative;
    letter-spacing: 0.5px;
    max-width: 233px;
    width: 100%;
    font-weight: 300;
  color: black;
}

.natural-dog-detail {
    padding: 50px 100px 50px 100px;
    margin-left: 100px;
}

.natural-heading1 {
    position: relative;
    padding: 0px 0px 7px 0px;
}

.natural-heading1:after {
    background-color: black;
    position: absolute;
    width: 20%;
    height: 1px;
    bottom: 0px;
    left: 0px;
    content: "";

}

.natural-heading2 {
    margin-top: 25px;
    position: relative;
    padding: 0px 0px 7px 0px;
  color:black;
}

.natural-heading2:after {
    background-color: black;
    position: absolute;
    width: 20%;
    height: 1px;
    bottom: 0px;
    left: 0px;
    content: "";

}

.natural-heading3 {
    margin-top: 25px;
}

.icono {
    background-color: #D3D3D3;
    text-align: center;
}

.safe {
    font-size: 20px;
    font-family: "Questrial";
}

.icon-para {
    font-size: 16px;
    font-family: "Questrial";
  color: black;
}

.icono i.fa-solid {
    font-size: 30px;
    margin: 30px 0px;
}

.main-icon-box-sec {
    padding: 20px 0px 50px 0px;
}

.world {
    font-size: 20px;
    line-height: 29px;
    font-family: "Questrial";
    font-weight: 600;
}

.world-para {
    font-size: 16px;
    line-height: 24px;
    font-family: "Questrial";
    font-weight: 400;
}

.image-div  img {
    background-size: cover;
    width: 400px;
    height: 331px;
}
#main .page-content{
	width: 1100px;
}



@media only screen and (max-width: 767px) {
    .natural-dog-detail {
        padding: 0px 0px 0px 0px;
        margin-left: 0px;
    }
  #main .page-content{
  width: 100%;
  }

    .natural-heading1 {
        padding-top: 22px;
        padding-left: 22px;
    }

    .natural-heading2 {
        padding-left: 22px;
    }

    .natural-heading3 {
        padding-left: 22px;
        padding-bottom: 22px;
    }
  .image-div img{
  	width: 100%;
    height: 250px;
  }
  .icon-detail{
  	padding-top: 15px;
  }
}




.main-section {
    padding: 100px 0px;
}

.dutch {
    font-size: 44px;
    text-align: right;
    border-bottom: 2px solid;
    padding-bottom: 25px;
}

.li-style{
    font-size: 20px;
    line-height: 32px;
    border-bottom: 2px solid;
    height: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
   text-align: right;
   
}

.li-style:last-child {
    border-bottom: none;
}

.first-col0 {
    background-color: #EDE8E0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.first-col0  img {
    max-width: 110px;
    width: 100%;
    text-align: center;
    margin-top: -65px;
    border: 1px solid black;
    border-radius: 90px;
}

.dutchi {
    padding: 40px 0px 20px 0px;
    font-size: 20px;
    font-weight: 600; 
    border-bottom: 2px solid;
    width: 250px;
    text-align: center;
}

.friday {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 250px;

}
.first-col1{
    background-color: #FFF100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.first-col1 img {
    max-width: 110px;
    width: 100%;
    text-align: center;
    margin-top: -65px;
    border: 1px solid black;
    border-radius: 90px;
}
.reaction{
    padding: 0px 42px 0px 17px;
}
.friday1{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 250px;
    font-size: 24px;

}
@media (max-width:992px) {
    .container {
        max-width: 950px;
        width: 100%;
        margin: 0 auto;
    }
    .dutch{
        font-size: 34px;
        padding-bottom: 23px;
        text-align: center;
    }
    .li-style{
        height: 90px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .dutchi{
        padding: 15px 0px ;
        width: 200px;
    } 
    .friday1 ,.friday{
        width: 200px;
        height: 90px;
        text-align: center;
        font-size: 18px;
    }
    br{
        display: none;
    }
  .join-royal{
  	padding: 0px 0px;
  }
}
@media (max-width:768px) {
    .container {
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
    }
    .first-col1{
       margin-top: 70px;
    }
    .friday1 ,.friday{
        width: 160px;
        height: 70px;
        text-align: center;
        font-size: 16px;
    }
    .dutchi{
        padding: 15px 0px ;
        width: 160px;
    }
    .li-style{
        height: 70px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 16px;
    }
     .reaction{
        padding: 0px 50px;
     }
     .dutch{
        font-size: 34px;
        padding-bottom: 18px;
        text-align: center;
    }
  
  .join-royal{
  	padding: 0px 0px;
  }
}
@media (max-width:425px) {
    .container {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
    }
    .dutch{
        font-size: 28px;
    }
    .li-style{
        font-size: 14px;
        height: 60px;
    }
    .first-col0{
       margin: 70px 0px;
    }
    .friday1 ,.friday{
        width: 160px;
        height: 60px;
        text-align: center;
        font-size: 14px;
    }
  
  .join-royal{
  	padding: 0px 0px;
  }
}

.edit-in {
    background-image: linear-gradient(rgb(0 0 0 / 50%), rgba(0, 128, 255, 0.5)), url(https://images7.alphacoders.com/905/905953.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.royal {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 70px 0px;
}

.pattis {
    font-size: 24px;
}

.main-loyal {
    padding: 0px 0px;
}

.royal h1 {
    font-size: 30px;
    color: white;
    line-height: 48px;
}

.royal p {
    font-size: 22x;
    color: white;
    line-height: 48px;
}

button.btn.btn-darki {
    font-size: 18px;
    padding: 8px 55px;
    letter-spacing: 0.5px;
    background-color: black;
    color: white;
    border-radius: 0;
}

button.btn.btn-darky {
    font-size: 18px;
    padding: 8px 55px;
    letter-spacing: 0.5px;
    background-color: white;
    color: black;
    border-radius: 0;
    margin-left: 10px;
}

.join-royal {
    text-align: center;
    border-right: 2px solid black;
    padding: 0px 20px;
}

.reward {
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 10px;
}

.loerm {
    font-size: 16px;
    line-height: 24px;
}

.join {
    padding: 50px 0px;
}

.join-royali {
    padding: 0px 20px;
    text-align: center;
}

.icon-group {

    padding: 0px 0px;
}

.reward {
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: center;
}

.icon i.fa-solid {
    font-size: 32px;
    margin-bottom: 10px;
}

.free {
    font-size: 16px;
}

.icono {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.lae {
    background-color: #F5F5F5;
    padding: 40px 0px;
}

h1.it-mean {
    max-width: 325px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
  	padding-top: 25px;
}

h1.it-mean::before {
    position: absolute;
    content: "";
    background-color: black;
    width: 380px;
    height: 2px;
    left: -118%;
    bottom: 45px;
}

h1.it-mean::after {
    position: absolute;
    content: "";
    background-color: black;
    width: 380px;
    height: 2px;
    right: -118%;
    bottom: 45px;
}
.mean-it{
    text-align: center;
    margin: 30px 0px;
}
.main-table{
    padding: 40px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pound{
    padding: 20px 0px;
    border-bottom: 2px solid;
}
/* table */
.divi2 {
    text-align: center;
    padding: 50px 0px;
}

table {
    width: 100%;
    text-align: left;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;

}

tr {
    text-align: left;

}

th {
    font-family: "Poppins";
    font-size: 16px;
    background-color:transparent;
    padding-bottom: 8px;
    padding-top: 8px;
    color: black;
    margin: 0px 0px;
 
    text-align: center;
}

td {
    text-align: center;
    font-family: "Poppins";
    border-bottom: 2px solid black;
    padding: 15px 30px;

}

td.name {
    font-weight: 400;
    color: black;
    font-family: "Poppins";


}

td.data {
    font-weight: 400;
    color: black;
}

#row-style{
display: flex;
}

@media (max-width:767px) {
    .icono {
        display: block;
  }
  h1.it-mean::after{
  display: none;
  }
  td{
  	padding: 0px 0px;
  }
  button.btn.btn-darky{
  	padding: 0px 0px;
  }
  button.btn.btn-darki{
  	padding: 0px 0px;
  }
  .reward {
  font-size: 18px;
  }
  .loerm {
  font-size: 14px;
  }
}


.accordion .accordion-item {
  border-bottom: 1px solid black;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid black;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: black;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: ;black
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: black;
  border: 1px solid #03b5d2;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: black;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}


@media (max-width: 767px) {
  .accordion button .icon {
    top: 50%;
    transform: translateY(-50%);
  }

  .accordion button .icon::before,
  .accordion button .icon::after {
    top: 50%;
    transform: translateY(-50%);
  }

  .accordion button .accordion-title {
    padding: 1em;
  }

  .accordion button .icon {
    right: 1em;
    top: 57px;
  }

  .accordion button[aria-expanded='true'] + .accordion-content {
    max-height: 100%; /* Adjust the value as needed */
  }

  .accordion .accordion-content {
    padding: 1em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 200ms linear;
    will-change: max-height;
  }

  .accordion button[aria-expanded='true'] + .accordion-content {
    opacity: 1;
    max-height: 100%; /* Adjust the value as needed */
  }
}

JS

<script>

window.addEventListener('load', (event) => {
    const items = document.querySelectorAll('.accordion button');
    
    function toggleAccordion() {
        const itemToggle = this.getAttribute('aria-expanded');
        
        for (i = 0; i < items.length; i++) {
            items[i].setAttribute('aria-expanded', 'false');
        }
        
        if (itemToggle == 'false') {
            this.setAttribute('aria-expanded', 'true');
        }
    }
    
    items.forEach((item) => item.addEventListener('click', toggleAccordion));
    
});

</script>

<script>
    const items = document.querySelectorAll('.accordion button');

    function toggleAccordion() {
      const itemToggle = this.getAttribute('aria-expanded');
    
      for (i = 0; i < items.length; i++) {
        items[i].setAttribute('aria-expanded', 'false');
      }
    
      if (itemToggle == 'false') {
        this.setAttribute('aria-expanded', 'true');
      }
    }
    
    items.forEach((item) => item.addEventListener('click', toggleAccordion));    
</script>

endriu107 · December 17, 2023

Why you do not use bootstrap built in accordion?

Santietsit · December 23, 2023

I have tried, but for some reason is not working.

I have added the HTML sample that I found here https://getbootstrap.com/docs/5.0/components/accordion/

Then the issue I guess is where do I find the css and jss code that I need to introduce in the website (for that, I plan to use the Classydevs Custom CSS and JS).

Can you help me out here?

endriu107 · December 23, 2023

Try use this: https://getbootstrap.com/docs/4.6/components/collapse/

All css changes you can put in custom.css file in yourt theme assets directory.

Santietsit · December 23, 2023

CSS I manage to make it work, what I am finding a bit of trouble is with the script (I have little experience with that)…

endriu107 · December 23, 2023

Using bootstrap collapse you didn't need any script at all.

Santietsit · December 24, 2023

22 hours ago, endriu107 said:

Using bootstrap collapse you didn't need any script at all.

i think I managed to get to the bottom of the problem (but not able to solve it yet). Basically when I input the html code within the "design-pages", after saving, prestashop is removing part of the code (specifically <label for="title1">Accordion One</label>), so it does not work.

Do you have any idea why that is happening?

endriu107 · December 24, 2023

Try in Configure > Shop parameters > General > turn off HTML Purifier.

Santietsit · December 24, 2023

Great, extremely helpful. Let me play around with that and see if this has solved the issue

Sign In

Problem with Javascript

Recommended Posts

Santietsit

Link to comment

Share on other sites

endriu107

Link to comment

Share on other sites

Santietsit

Link to comment

Share on other sites

endriu107

Link to comment

Share on other sites

Santietsit

Link to comment

Share on other sites

endriu107

Link to comment

Share on other sites

Santietsit

Link to comment

Share on other sites

endriu107

Link to comment

Share on other sites

Santietsit

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com