展開不展開二
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Content with YouTube and News</title>
<style>
.collapsible {
background-color: #f1f1f1;
color: #444;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
font-size: 16px;
border-radius: 5px;
outline: none;
transition: background-color 0.3s;
margin-bottom: 10px;
}
.collapsible:hover {
background-color: #ddd;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: white;
border-radius: 0 0 5px 5px;
}
.arrow {
float: right;
margin-left: 10px;
transition: transform 0.3s;
}
.arrow.open {
transform: rotate(180deg);
}
.input-container {
margin-bottom: 10px;
}
.input-container label {
display: block;
margin-top: 10px;
}
.input-container input,
.input-container input,
.input-container textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
}
.input-container button {
margin-top: 10px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.input-container button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Content Generator</h2>
<button class="collapsible">Article 1 <span class="arrow">▼</span></button>
<div class="content">
<div class="input-container">
<textarea id="news-article-1" placeholder="Enter news article content here..." rows="4"></textarea>
<label for="youtube-url-1">YouTube URL:</label>
<input type="text" id="youtube-url-1" placeholder="Enter YouTube URL here...">
<label for="youtube-width-1">Width:</label>
<input type="number" id="youtube-width-1" placeholder="Width" value="560">
<label for="youtube-height-1">Height:</label>
<input type="number" id="youtube-height-1" placeholder="Height" value="315">
<label for="iframe-url-1">Embed URL:</label>
<input type="text" id="iframe-url-1" placeholder="Enter URL here...">
<button onclick="generateContent(1)">Generate HTML</button>
</div>
<pre id="generated-html-1"></pre>
</div>
<button class="collapsible">Article 2 <span class="arrow">▼</span></button>
<div class="content">
<div class="input-container">
<textarea id="news-article-2" placeholder="Enter news article content here..." rows="4"></textarea>
<label for="youtube-url-2">YouTube URL:</label>
<input type="text" id="youtube-url-2" placeholder="Enter YouTube URL here...">
<label for="youtube-width-2">Width:</label>
<input type="number" id="youtube-width-2" placeholder="Width" value="560">
<label for="youtube-height-2">Height:</label>
<input type="number" id="youtube-height-2" placeholder="Height" value="315">
<label for="iframe-url-2">Embed URL:</label>
<input type="text" id="iframe-url-2" placeholder="Enter URL here...">
<button onclick="generateContent(2)">Generate HTML</button>
</div>
<pre id="generated-html-2"></pre>
</div>
<script>
document.querySelectorAll('.collapsible').forEach((button, index) => {
button.addEventListener('click', function() {
const content = this.nextElementSibling;
const arrow = this.querySelector('.arrow');
if (content.style.display === 'block') {
content.style.display = 'none';
arrow.classList.remove('open');
} else {
content.style.display = 'block';
arrow.classList.add('open');
}
});
});
function generateContent(index) {
const articleContent = document.getElementById(`news-article-${index}`).value;
const youtubeUrl = document.getElementById(`youtube-url-${index}`).value;
const width = document.getElementById(`youtube-width-${index}`).value;
const height = document.getElementById(`youtube-height-${index}`).value;
const iframeUrl = document.getElementById(`iframe-url-${index}`).value;
let generatedHTML = '';
if (articleContent) {
generatedHTML += `<h3>Article ${index}</h3>\n<p>${articleContent}</p>\n`;
}
if (youtubeUrl) {
generatedHTML += `<iframe src="${youtubeUrl}" width="${width}" height="${height}" frameborder="0" allowfullscreen></iframe>\n`;
}
if (iframeUrl) {
generatedHTML += `<iframe src="${iframeUrl}" width="${width}" height="${height}" frameborder="0"></iframe>\n`;
}
document.getElementById(`generated-html-${index}`).textContent = generatedHTML;
}
</script>
</body>
</html>
頁:
[1]