FAQ (Frequently Asked Question) Generator

                Created By Ranjeet Mart

 

Created By Ranjeet Mart

Question 1 Question 2 Question 3 Question 4 Question 5 Question 6 Question 7 Question 8 Question 9 Question 10

Html code

Css code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> <style> *{ font-family: Arial, Helvetica, sans-serif; } body{ background-color: aliceblue; } .faq { width: 100%; height: auto; margin: 30px auto; } .answer{ background-color: white; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; color: gray; padding: 10px 10px 20px 10px; } .question { padding: 10px; font-size: 20px; font-weight: 400; cursor: pointer; display: flex; align-items: center; justify-content: space-between; background-color: white; color: rgb(55, 55, 55); margin-top: 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } .answer { display: none; margin-top: 10px; } .answer.active { display: block; margin-top: 1px; margin-bottom: 20px; } .fa { margin-left: 5px; } .fa-chevron-down:before { content: "\f078"; } i{ display: block; font-size: 15px; padding-left: 10px; } @media (max-width: 768px) {.question{font-size: 15px;} .answer.active{font-size: 13px;} } </style>

Javascript code

<script> function toggleAnswer(id) { var answer = document.getElementById("answer" + id); answer.classList.toggle("active"); } </script>

Schema Script code