Page Reader & Hidden in Hidden Combination: Demo
🔊
Listen
Page Reader & Hidden in Hidden Combination: Demo
Welcome to Our Website
This is an example of content that the page reader will read aloud.
FAQ:
OPEN
▼
Full HTML Code:
▼
How does this FAQ section work?
▼
Full HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page with FAQ Accordion and Page Reader</title>
</head>
<body>
<!-- Speaker Icon and Text for Page Reader -->
<div id="page-reader" onclick="readContent(event)" style="position: fixed; top: 70px; right: 30px; display: flex; align-items: center; cursor: pointer; background-color: royalblue; color: white; padding: 10px; border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
<span style="font-size: 24px; margin-right: 5px;">🔊</span>
<span style="font-size: 16px; font-weight: bold;">Listen</span>
</div>
<!-- Content to be Read -->
<div id="content" style="font-size: 16px; font-weight: bold; margin: 20px;">
<h1>Welcome to Our Website</h1>
<p>This is an example of content that the page reader will read aloud.</p>
<!-- FAQ Section -->
<h2 style="display: flex; align-items: center; margin: 0; justify-content: space-between;">
FAQ:
<div style="display: flex; align-items: center; margin-left: auto;">
<span class="toggle-text" style="margin-right: 5px;">OPEN</span>
<span id="main-icon" onclick="toggleFAQSection(event)" style="padding: 10px; cursor: pointer;">▼</span>
</div>
</h2>
<div id="faq-container" style="width: 100%; margin-top: 20px; border: 1px solid #ddd; border-radius: 5px; visibility: hidden;">
<!-- FAQ Item 1 -->
<div onclick="toggleAnswer(event, this)" style="background-color: #f9f9f9; padding: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd;">
<span>Full HTML Code:</span>
<span style="font-weight: bold; transition: transform 0.3s;">▼</span>
</div>
<div style="padding: 10px; display: none; background-color: #fff;">
This is where the HTML code details would go.
</div>
<!-- FAQ Item 2 -->
<div onclick="toggleAnswer(event, this)" style="background-color: #f9f9f9; padding: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd;">
<span>How does this FAQ section work?</span>
<span style="font-weight: bold; transition: transform 0.3s;">▼</span>
</div>
<div style="padding: 10px; display: none; background-color: #fff;">
Click on each question to toggle the visibility of the answer.
</div> <!-- FAQ Item Box -->
</div> <!-- FAQ Section Box-->
<h3> Full HTML Code: <h3>
</div> <!-- End Page Reader Section-->
<div style="font-size: 16px; font-weight: bold; margin: 20px;">
Pest Full HTML Parse Code Here
</div> <!-- End End HTML Code Section-->
<!-- JavaScript for Page Reader and FAQ Accordion -->
<script>
// Function for Page Reader Feature
function readContent(event) {
event.stopPropagation();
const content = document.getElementById('content');
const pageReader = document.getElementById('page-reader');
// Highlight content
content.style.backgroundColor = "lightyellow";
pageReader.style.backgroundColor = 'green';
// Text to be read
const textToRead = content.innerText;
// Check if the browser supports speech synthesis
if ('speechSynthesis' in window) {
const speech = new SpeechSynthesisUtterance(textToRead);
speech.lang = 'en-US';
speech.pitch = 1;
speech.rate = 1;
window.speechSynthesis.speak(speech);
// Reset styles after reading
speech.onend = function() {
content.style.backgroundColor = "";
pageReader.style.backgroundColor = 'royalblue';
};
} else {
alert('Sorry, your browser does not support speech synthesis.');
}
}
// Function to Toggle FAQ Section Visibility
function toggleFAQSection(event) {
event.stopPropagation();
const faqContainer = document.getElementById('faq-container');
const mainIcon = document.getElementById('main-icon');
const toggleText = document.querySelector('.toggle-text');
// Toggle FAQ visibility
if (faqContainer.style.visibility === "hidden") {
faqContainer.style.visibility = "visible";
mainIcon.textContent = "▲";
toggleText.textContent = "CLOSE";
} else {
faqContainer.style.visibility = "hidden";
mainIcon.textContent = "▼";
toggleText.textContent = "OPEN";
}
}
// Function to Toggle Individual FAQ Answers
function toggleAnswer(event, element) {
event.stopPropagation();
const answer = element.nextElementSibling;
const icon = element.querySelector('span:nth-child(2)');
// Toggle answer display and icon rotation
answer.style.display = (answer.style.display === "block") ? "none" : "block";
icon.style.transform = (answer.style.display === "block") ? "rotate(180deg)" : "rotate(0deg)";
}
</script>
</body>
</html>
Comments
Post a Comment