NAVIGATION
ABOUT US
resources
1. Fill in the sections
2. Add as many sections as desired for your accordiOn
3. Click DONE. Copy the code into a webpage to see the accordiON.
about this project
This project was originally designed to aid with improving webpage layout.
Create an AccordiOn
WHY USE AN ACCORDION
An accordion is useful for separating content on a page. Some examples:ION
- Steps in a procedure (e.g., Hypothesis, Procedures, Data Collection, etc.)
- Topic with multiple subtopics with each subtopic on its own accordion panel (Oceans: Atlantic, Artic, Indian, etc.)
- Explanation of components to meet standard (e.g., Introduction, Use facts and definitions to develop points, Concluding Statement or Section)
- W.2.2. Write informative/explanatory texts in which they introduce a topic, use facts and definitions to develop points, and provide a concluding statement or section.
HOW TO CREATE AN ACCORDION
- Enter your content in the form below
- Add as many panels as needed
HOW TO USE AN ACCORDION YOU CREATED HERE
- Copy the accordion HTML code generated by this tool
- Paste the code in the HTML section of an LMS assignment, on a Google Site page, on a webpage, or anywhere you can use HTML
- Save your new page and you will see the accordion you created with your content
- Provide the link
**You may use the accordion creator here, or copy the code below and have the app on your own site.
ACCORDION CREATOR HTML CODE
The HTML code below created in ChatGPT is provided for personal use only, "AS IS", without guarantee or warranty.
You may copy and paste it anywhere you use HTML and you will have the accordion creator.
If you use it, you are solely responsible for assuring that is works correctly, and accurately, as intended for the purposes intended.
CODE FOR CREATING AN ACCORDION (created with ChatGPT)
<div style="width: 100%; padding: 20px; box-sizing: border-box; font-family: Arial, sans-serif;">
<!-- Main accordion form container -->
<div id="accordion-form" style="max-width: 800px; margin: auto;">
<!-- Global Header Background Color Option -->
<div style="margin-bottom: 15px;">
<!-- Label for global section header color selection -->
<label style="font-weight: bold; color: #333;">Select a global background color for section headers:</label>
<div style="margin-top: 5px;">
<!-- Buttons for selecting predefined colors -->
<button onclick="setGlobalHeaderColor('#333399')" style="background-color: #333399; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Blue</button>
<button onclick="setGlobalHeaderColor('#FF4500')" style="background-color: #FF4500; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Orange</button>
<button onclick="setGlobalHeaderColor('#669933')" style="background-color: #669933; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Green</button>
<button onclick="setGlobalHeaderColor('#8A2BE2')" style="background-color: #8A2BE2; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Purple</button>
<button onclick="setGlobalHeaderColor('#FF1493')" style="background-color: #FF1493; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Pink</button>
</div>
<div style="margin-top: 5px;">
<!-- Input field for entering custom color hex codes -->
<label for="customGlobalColor" style="font-weight: bold; color: #333;">Or enter a custom hex code:</label>
<input type="text" id="customGlobalColor" style="padding: 5px; border: 1px solid #555; border-radius: 4px; width: 150px;" placeholder="#RRGGBB" onchange="setGlobalHeaderColor(this.value)" />
</div>
</div>
<!-- Initial Section for Accordion -->
<div style="margin-bottom: 15px;">
<!-- Title input for the first section -->
<label for="title-0" style="font-weight: bold; color: #333;">Title:</label>
<input type="text" id="title-0" style="width: 100%; padding: 8px; margin-top: 5px; background-color: transparent; color: inherit; border: 1px solid #555; border-radius: 4px;" placeholder="Enter section title" />
</div>
<div style="margin-bottom: 15px;">
<!-- Content formatting buttons -->
<label style="font-weight: bold; color: #333;">Content:</label>
<div style="margin-top: 5px;">
<!-- Buttons for text formatting options -->
<button onclick="formatText('bold')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Bold (Ctrl+B)</button>
<button onclick="formatText('italic')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Italic (Ctrl+I)</button>
<button onclick="insertLink()" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Link</button>
<button onclick="formatText('insertUnorderedList')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Bulleted List</button>
<button onclick="formatText('insertOrderedList')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Numbered List</button>
<button onclick="formatText('indent')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Indent</button>
<button onclick="formatText('outdent')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Outdent</button>
<button onclick="insertBreak()" style="color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">New Line/Single Space (Break)</button>
</div>
<!-- Contenteditable div for the first section's content -->
<div id="content-0" contenteditable="true" style="border: 1px solid #555; padding: 8px; height: 150px; overflow-y: auto; margin-top: 10px; color: inherit; background-color: transparent; position: relative;" onfocus="handleFocus(this)" onblur="handleBlur(this)" onkeydown="handleFormattingShortcuts(event)">
<span class="placeholder">Enter section content here...</span>
</div>
</div>
<!-- Container for additional sections -->
<div id="additional-sections"></div>
<!-- Buttons to add a new section or complete the accordion setup -->
<div style="display: flex; justify-content: space-between; margin-top: 15px;">
<button onclick="addSection()" style="background-color: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Add New Section</button>
<button onclick="generateAccordion()" style="background-color: #28a745; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Done</button>
</div>
</div>
<!-- Container for displaying the generated accordion code -->
<div id="generated-code" style="margin-top: 30px; display: none;">
<h3 style="text-align: center; font-weight: bold; color: #333;">Generated Accordion Code</h3>
<textarea id="accordion-output" style="width: 100%; height: 300px; padding: 10px; border: 1px solid #555; margin-top: 10px; color: inherit; background-color: transparent;"></textarea>
</div>
<script>
let sectionCount = 1; // Counter for sections
let globalHeaderColor = '#333'; // Default global header color
const sectionHeaderColors = []; // Array to hold specific section header colors
// Function to set the global header color
function setGlobalHeaderColor(color) {
globalHeaderColor = color;
sectionHeaderColors.length = 0; // Reset individual section colors when global color changes
}
// Function to add a new section to the accordion
function addSection() {
const sectionHtml = `
<div style="margin-bottom: 15px;">
<label for="title-${sectionCount}" style="font-weight: bold; color: #333;">Title:</label>
<input type="text" id="title-${sectionCount}" style="width: 100%; padding: 8px; margin-top: 5px; background-color: transparent; color: inherit; border: 1px solid #555; border-radius: 4px;" placeholder="Enter section title" />
</div>
<!-- Individual Section Header Background Color Option -->
<div style="margin-bottom: 15px;">
<label style="font-weight: bold; color: #333;">Choose a header color for this section:</label>
<div style="margin-top: 5px;">
<!-- Buttons for predefined colors for individual sections -->
<button onclick="setSectionHeaderColor(${sectionCount}, '#333399')" style="background-color: #333399; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Blue</button>
<button onclick="setSectionHeaderColor(${sectionCount}, '#FF4500')" style="background-color: #FF4500; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Orange</button>
<button onclick="setSectionHeaderColor(${sectionCount}, '#669933')" style="background-color: #669933; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Green</button>
<button onclick="setSectionHeaderColor(${sectionCount}, '#8A2BE2')" style="background-color: #8A2BE2; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Purple</button>
<button onclick="setSectionHeaderColor(${sectionCount}, '#FF1493')" style="background-color: #FF1493; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px;">Pink</button>
</div>
<div style="margin-top: 5px;">
<!-- Input for custom hex color for this section -->
<label for="customColor-${sectionCount}" style="font-weight: bold; color: #333;">Or enter a custom hex code:</label>
<input type="text" id="customColor-${sectionCount}" style="padding: 5px; border: 1px solid #555; border-radius: 4px; width: 150px;" placeholder="#RRGGBB" onchange="setSectionHeaderColor(${sectionCount}, this.value)" />
</div>
</div>
<div style="margin-bottom: 15px;">
<!-- Content label and formatting buttons -->
<label style="font-weight: bold; color: #333;">Content:</label>
<div style="margin-top: 5px;">
<button onclick="formatText('bold')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Bold (Ctrl+B)</button>
<button onclick="formatText('italic')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Italic (Ctrl+I)</button>
<button onclick="insertLink()" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Link</button>
<button onclick="formatText('insertUnorderedList')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Bulleted List</button>
<button onclick="formatText('insertOrderedList')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Numbered List</button>
<button onclick="formatText('indent')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Indent</button>
<button onclick="formatText('outdent')" style="margin-right: 5px; color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">Outdent</button>
<button onclick="insertBreak()" style="color: #333; background-color: #f0f0f0; border: 1px solid #555; border-radius: 4px; padding: 5px;">New Line/Single Space (Break)</button>
</div>
<!-- Contenteditable div for section content with placeholder -->
<div id="content-${sectionCount}" contenteditable="true" style="border: 1px solid #555; padding: 8px; height: 150px; overflow-y: auto; margin-top: 10px; color: inherit; background-color: transparent; position: relative;" onfocus="handleFocus(this)" onblur="handleBlur(this)" onkeydown="handleFormattingShortcuts(event)">
<span class="placeholder">Enter section content here...</span>
</div>
</div>
`;
// Add the new section HTML to the additional sections container
const additionalSections = document.getElementById('additional-sections');
additionalSections.insertAdjacentHTML('beforeend', sectionHtml);
sectionCount++;
}
// Function to handle focus on contenteditable div (hide placeholder)
function handleFocus(element) {
const placeholder = element.querySelector('.placeholder');
if (placeholder) {
placeholder.style.display = 'none'; // Hide the placeholder
}
}
// Function to handle blur on contenteditable div (show placeholder if empty)
function handleBlur(element) {
if (!element.innerText.trim()) {
const placeholder = element.querySelector('.placeholder');
if (placeholder) {
placeholder.style.display = 'block'; // Show the placeholder if content is empty
} else {
// If placeholder doesn't exist, create it
const newPlaceholder = document.createElement('span');
newPlaceholder.className = 'placeholder';
newPlaceholder.innerText = 'Enter section content here...';
element.appendChild(newPlaceholder);
}
}
}
// Function to apply formatting commands
function formatText(command) {
document.execCommand(command, false, null);
}
// Function to insert a hyperlink
function insertLink() {
const url = prompt('Enter the URL:', 'https://');
if (url) {
document.execCommand('createLink', false, url);
}
}
// Function to insert a line break
function insertBreak() {
document.execCommand('insertHTML', false, '<br>');
}
// Handle formatting shortcuts (keyboard events)
function handleFormattingShortcuts(event) {
// Handle Ctrl+B and Ctrl+I for bold and italic
if (event.ctrlKey && event.key === 'b') {
event.preventDefault();
document.execCommand('bold');
} else if (event.ctrlKey && event.key === 'i') {
event.preventDefault();
document.execCommand('italic');
}
// Handle Enter key for lists and paragraphs
if (event.key === 'Enter') {
event.preventDefault();
const selection = window.getSelection();
const range = selection.getRangeAt(0);
const parentElement = range.startContainer.parentElement;
if (parentElement.tagName === 'LI') {
// Inside a list item
splitListItem(parentElement, range);
} else if (parentElement.tagName === 'OL' || parentElement.tagName === 'UL') {
// Inside an ordered or unordered list
const newListItem = document.createElement('li');
newListItem.innerHTML = '<br>';
parentElement.appendChild(newListItem);
selection.removeAllRanges();
range.setStart(newListItem, 0);
range.setEnd(newListItem, 0);
selection.addRange(range);
} else {
// Regular paragraph
splitParagraph(range);
}
}
}
// Function to split a list item at the cursor position
function splitListItem(listItem, range) {
const contentBeforeCursor = listItem.innerHTML.substring(0, range.startOffset);
const contentAfterCursor = listItem.innerHTML.substring(range.startOffset);
const newListItem = document.createElement('li');
newListItem.innerHTML = contentAfterCursor.trim() || '<br>';
listItem.innerHTML = contentBeforeCursor;
listItem.parentElement.insertBefore(newListItem, listItem.nextSibling);
const selection = window.getSelection();
selection.removeAllRanges();
const newRange = document.createRange();
newRange.setStart(newListItem, 0);
newRange.setEnd(newListItem, 0);
selection.addRange(newRange);
}
// Function to split a paragraph at the cursor position
function splitParagraph(range) {
const paragraph = range.startContainer;
const contentBeforeCursor = paragraph.textContent.substring(0, range.startOffset);
const contentAfterCursor = paragraph.textContent.substring(range.startOffset);
const newParagraph = document.createElement('p');
newParagraph.textContent = contentAfterCursor.trim() || '\u00A0'; // Non-breaking space for empty paragraph
paragraph.textContent = contentBeforeCursor;
if (paragraph.parentElement) {
paragraph.parentElement.insertBefore(newParagraph, paragraph.nextSibling);
}
const selection = window.getSelection();
selection.removeAllRanges();
const newRange = document.createRange();
newRange.setStart(newParagraph, 0);
newRange.setEnd(newParagraph, 0);
selection.addRange(newRange);
}
// Function to process the content before outputting it
function processContent(content) {
// Remove extra <p></p> tags if present
return content.replace(/<div><p><\/p><\/div>/g, '<p></p>').replace(/<div>/g, '').replace(/<\/div>/g, '');
}
// Function to set a specific header color for a section
function setSectionHeaderColor(index, color) {
sectionHeaderColors[index] = color;
}
// Function to generate the final accordion HTML code
function generateAccordion() {
let accordionHtml = `<div style="width: 100%; max-width: 800px; margin: auto;">`;
// Loop through each section and append its content to the accordion HTML
for (let i = 0; i < sectionCount; i++) {
const title = document.getElementById(`title-${i}`).value;
let content = document.getElementById(`content-${i}`).innerHTML;
// Process content to replace line breaks with appropriate HTML
content = processContent(content);
// Use section-specific color if set, otherwise fall back to global color
const headerColor = sectionHeaderColors[i] || globalHeaderColor;
accordionHtml += `
<div class="accordion-section" style="border-bottom: 1px solid #555; width: 100%; margin-bottom: 8px;">
<div class="accordion-header" style="background-color: ${headerColor}; color: #ffffff; padding: 15px; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease; border-radius: 5px; position: relative; width: 100%;" onclick="this.nextElementSibling.style.display = (this.nextElementSibling.style.display === 'block' ? 'none' : 'block')">
${title}
</div>
<div class="accordion-content" style="display: none; padding: 15px; color: inherit; width: 100%;">
<div style="width: 100%;">${content}</div>
</div>
</div>
`;
}
accordionHtml += '</div>';
// Display the generated accordion HTML in the textarea
document.getElementById('accordion-output').value = accordionHtml;
document.getElementById('generated-code').style.display = 'block'; // Show the generated code section
}
</script>
</div>
