diff --git a/assets/css/faq.css b/assets/css/faq.css new file mode 100644 index 0000000..f3ed4d1 --- /dev/null +++ b/assets/css/faq.css @@ -0,0 +1,51 @@ +h1 { + text-align: center; +} + +h2 { + text-align: center; + font-size: medium; +} + +.faq { + margin: 0 auto; + width: 500px; +} + +.faq ul { + padding: 0; + list-style-type: none; +} + +.faq ul li { + background: #f1f1f1; + padding: 10px 0; + margin-bottom: 10px; + position: relative; +} + +.question { + font-size: 18px; + color: #47a3da; + text-decoration: none; + display: block; + padding: 0 0 0 20px; + position: relative; +} + +.question:hover { + color: #000; +} + + +.question.active { + color: #000; +} + +.faq ul li p { + display: none; + font-size: 14px; + color: #2f2f2f; + line-height: 24px; + padding: 10px 20px; +} \ No newline at end of file diff --git a/assets/js/faq.js b/assets/js/faq.js new file mode 100644 index 0000000..c5b9b73 --- /dev/null +++ b/assets/js/faq.js @@ -0,0 +1,15 @@ +let faqLink = document.querySelectorAll('.question'); + +faqLink.forEach(function(link) { + link.addEventListener('click', function() { + let faqCont = this.nextElementSibling; + + if (faqCont.style.display === 'block') { + faqCont.style.display = 'none'; + this.classList.remove('active'); + } else { + faqCont.style.display = 'block'; + this.classList.add('active'); + } + }); +}); diff --git a/faq/index.html b/faq/index.html index e77fa83..84eca91 100644 --- a/faq/index.html +++ b/faq/index.html @@ -5,6 +5,7 @@ Elite Solar + @@ -19,5 +20,37 @@
  • FAQ
    • + +

    FAQ

    +

    Voici les questions fréquentes de nos clients :

    +
    + +
    + - \ No newline at end of file +