Submit Accordian

rohitwushu
Jan 23, 2026 12
Live Preview

Live Editor

  <div class="accordion">
    <button class="accordion-header" aria-expanded="false" aria-controls="submit-panel">
      Submit Your Design
    </button>
    <div id="submit-panel" class="accordion-content" hidden>
      <div class="content-inner">
        <form>
          <label for="message">Your Message:</label>
          <textarea id="message" rows="4" placeholder="Type your response here..."></textarea>
          <button type="submit" class="submit-btn">Submit</button>
        </form>
      </div>
    </div>
  </div>
/* Reset & Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #0a1220;
  padding: 40px 20px;
}

/* Accordion Container */
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Accordion Header Button */
.accordion-header {
  width: 100%;
  padding: 16px 20px;
  background-color: #f5f7fa;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s;
}

.accordion-header:hover {
  background-color: #e9ecef;
}

.accordion-header::after {
  content: '▼';
  font-size: 12px;
  transition: transform 0.2s;
}

.accordion-header[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Accordion Content Panel */
.accordion-content {
  padding: 0;
  overflow: hidden;
  transition: padding 0.2s ease;
}

.accordion-content:not([hidden]) {
  padding: 20px;
}

/* Inner Form Styling */
.content-inner label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.content-inner textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 16px;
}

.submit-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-btn:hover {
  background-color: #0056b3;
}
   document.querySelectorAll('.accordion-header').forEach(button => {
      button.addEventListener('click', () => {
        const panel = button.nextElementSibling;
        const isExpanded = button.getAttribute('aria-expanded') === 'true';

        button.setAttribute('aria-expanded', !isExpanded);
        panel.hidden = isExpanded;
      });
    });
Categories

Submit Accordian

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
