Skip to content

Commit

Permalink
Merge pull request #699 from saumyayadav25/user-saumya
Browse files Browse the repository at this point in the history
faq smooth transition and animations
  • Loading branch information
vimistify authored Oct 14, 2024
2 parents 82c76c6 + e58ebaf commit ce16ced
Showing 1 changed file with 35 additions and 33 deletions.
68 changes: 35 additions & 33 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -568,8 +568,11 @@
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
transition: background-color 0.3s ease;
}
.faq:hover {
background-color: #f0f8ff; /* Slight hover effect for FAQs */
}

.faq-question {
background-color: #e7ffe7;
color: #333;
Expand All @@ -581,12 +584,14 @@
cursor: pointer;
font-size: 16px;
font-weight: 600;

display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}
.faq-question:hover {
background-color: #d5f0d5; /* Lighter green on hover */
}

.faq-question::after {
content: '';
display: inline-block;
Expand All @@ -602,20 +607,16 @@
}

.faq.active .faq-question::after {
border-top: none;
border-bottom: 8px solid #333;
/* Upward pointing wide "V" */
transform: rotate(180deg);
}

.faq-answer {
max-height: 0;
/* Initially hidden */
overflow: hidden;
/* Hide content when not visible */
opacity: 0;
max-height: 0; /* Initially hidden */
overflow: hidden; /* Hide content when not visible */
padding: 0 10px;
background-color: #fff;
transition: max-height 0.3s ease;
/* Smooth transition */
transition: max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth transition */
border-top: 1px solid #ccc;
}

Expand All @@ -624,12 +625,15 @@
}

.faq.active .faq-answer {
opacity: 1;
max-height: 200px;
/* Set to a sufficient height to display content */
padding: 10px;
/* Adds padding when expanded */
}

.faq.active .faq-answer p {
transition: opacity 0.3s ease-in-out;
}
/* Back to Top Button Styles */
#backToTopBtn {
position: fixed;
Expand Down Expand Up @@ -1144,30 +1148,28 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {
const faqButtons = document.querySelectorAll('.faq-question');
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqButtons = document.querySelectorAll('.faq-question');

faqButtons.forEach(button => {
button.addEventListener('click', function () {
const faq = button.parentElement;
const answer = faq.querySelector('.faq-answer');
faqButtons.forEach(button => {
button.addEventListener('click', function() {
const faq = button.parentElement;
const answer = faq.querySelector('.faq-answer');

// Toggle active class
faq.classList.toggle('active');
// Toggle active class
faq.classList.toggle('active');

// Control the max-height for slide effect
if (faq.classList.contains('active')) {
answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
} else {
answer.style.maxHeight = null; // Remove max-height to hide
}
// Control the max-height for slide effect
if (faq.classList.contains('active')) {
answer.style.maxHeight = answer.scrollHeight + 'px'; // Set height based on content
} else {
answer.style.maxHeight = '0'; // Set height to zero to collapse
}
});
});
});


</script>
});
</script>

<script>
//enabling the Dark mode toggle button added
Expand Down Expand Up @@ -1257,4 +1259,4 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to

</body>

</html>
</html>

0 comments on commit ce16ced

Please sign in to comment.