Ein Abschnitt auf meiner Website antwortet nicht (expandieren), wenn Sie klicken [geschlossen] ⇐ CSS

[Anonymous]

Ich arbeite an einem Website -Projekt mit HTML, CSS, JS, Bootstrap, PHP und Angular V1.8.2. Meine HTML sind in .Php -Dateien. Ich löste mit Angular. Die Herausforderung, mit der ich gegenübersteht, liegt im FAQ -Abschnitt. Ich habe meine HTML, CSS und JS in Ordnung aufgestellt, aber wenn die FAQs angeklickt werden, antworten Sie nicht, dass sie nicht erweitert werden, um die folgenden Details nach jeder Frage anzuzeigen. Was und wo könnte das Problem sein?

Code: Select all

digital.com























window.jQuery || document.write('')





AOS.init({
once: true
});








< /code>
Home.php







Frequently Asked [b]Questions(FAQs)[/b]

Here are some frequently asked questions and their answers, providing valuable insights and guidance about us, our services and expertise.





1. What is EMRA Beauty Consult and what does it specialize in? 

EMRA Beauty Consult is a leading firm in the beauty industry, specializing in strategic consultancy, branding, staff training, salon management, and internship programs tailored for beauty professionals and businesses.

[i][/i]


2. How long has EMRA Beauty Consult been in operation? 

EMRA Beauty Consult has been serving clients in the beauty industry for over 5 years, providing expert guidance and support to help businesses thrive and individuals succeed in their careers.

[i][/i]


3.  What sets EMRA Beauty Consult apart from other firms in the industry? 

At EMRA Beauty Consult, we pride ourselves on our comprehensive approach to beauty consulting, combining industry expertise with a deep understanding of market trends and client needs to deliver unparalleled results for our clients.

[i][/i]


4. Does EMRA Beauty Consult have a specific mission or vision? 

Yes, our mission at EMRA Beauty Consult is to empower beauty businesses and professionals to achieve their full potential through strategic guidance, innovative solutions, and personalized support. We envision a future where every beauty business thrives and every beauty professional succeeds.

[i][/i]


5. Where is EMRA Beauty Consult located, and how can I get in touch? 

Our headquarters are located at [Address], [City, State, Zip Code]. To get in touch with us, you can reach out via phone at [Phone Number] or email us at [Email Address].  We look forward to hearing from you!

[i][/i]











< /code>
style.css
/* ================ FAQS Section Start ================= */
.faq {
padding-top: 20px;
padding-bottom: 20px;
}

.faq .content h3 {
font-weight: 400;
font-size: 34px;
}

.faq .content p {
font-size: 15px;
color: #000000;
}

.faq .faq-container .faq-item {
position: relative;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.896);
overflow: hidden;
border-radius: 10px;
}

.faq .faq-container .faq-item:last-child {
margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
font-weight: 600;
font-size: 18px;
line-height: 24px;
margin: 0 30px 0 0;
transition: 0.3s;
cursor: pointer;
display: flex;
align-items: flex-start;
}

.faq .faq-container .faq-item h3 .num {
color: #ff0000;
padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
color: #ff0000;
}

.faq .faq-container .faq-item .faq-content {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
margin-bottom: 0;
overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
position: absolute;
top: 20px;
right: 20px;
font-size: 16px;
line-height: 0;
transition: 0.3s;
cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
color: #ff0000;
}

.faq .faq-container .faq-active h3 {
color: #ff0000;
}

.faq .faq-container .faq-active .faq-content {
grid-template-rows: 1fr;
visibility: visible;
opacity: 1;
padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
transform: rotate(90deg);
color: var(--accent-color);
}
/* ================ FAQS Section end ================= */
< /code>
 Main.js
// Change navbar background color on scroll start
$(window).scroll(function(){
$("nav").toggleClass("scrolled", $(this).scrollTop() > 50);
});
// Change navbar background color on scroll end

// Function to toggle the class for the hamburger icon start
function myFunction(x) {
x.classList.toggle("change");
}
// Function to toggle the class for the hamburger icon end

// Back To Top Button Start
const backToTopButton = document.getElementById('backToTop');
const progressCircle = document.querySelector('.progress-circle-fill');
let isScrolling;

window.addEventListener('scroll', () => {
window.clearTimeout(isScrolling);

const scrollTotal = document.documentElement.scrollHeight - window.innerHeight;
const scrollPosition = window.scrollY;
const scrollPercentage = (scrollPosition / scrollTotal) * 157;

progressCircle.style.strokeDashoffset = 157 - scrollPercentage;

isScrolling = setTimeout(() => {
if (scrollPosition > 300) {
backToTopButton.classList.add('visible');
} else {
backToTopButton.classList.remove('visible');
}
}, 100);
}, false);

backToTopButton.addEventListener('click', (e) => {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Back To Top Button End

//Frequently Asked Questions Toggle start
document.querySelectorAll('.faq-item h3, .faq-item .faq-toggle').forEach((faqItem) => {
faqItem.addEventListener('click', () =>  {
faqItem.parentNode.classList.toggle('faq-active');
});
});
//Frequently Asked Questions Toggle end
< /code>
app.js
var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.php"
})
.when("/about.php", {
templateUrl: "about.php"
})
.when("/services.php", {
templateUrl: "services.php"
})
.when("/portfolio.php", {
templateUrl: "portfolio.php"
})
.when("/blog.php", {
templateUrl: "blog.php"
})
.when("/contact.php", {
templateUrl: "contact.php"
})
.when("/web-design.php", {
templateUrl: "web-design.php"
})
.when("/app-development.php", {
templateUrl: "app-development.php"
})
.when("/graphics-design.php", {
templateUrl: "graphics-design.php"
})
.when("/seo-ads.php", {
templateUrl: "seo-ads.php"
})
.when("/roadside-banner.php", {
templateUrl: "roadside-banner.php"
})
.when("/terms.php", {
templateUrl: "terms.php"
})
.otherwise({
redirectTo: "/"
});
});

app.controller("NavController", function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
};
});