Hover Button Effects | AnimateItNow

Default Accordion

What is HTML?

HTML stands for HyperText Markup Language and is used to structure content on the web.

What is CSS?

CSS stands for Cascading Style Sheets and is used to style HTML content.

What is JavaScript?

JavaScript is a programming language that adds interactivity to web pages.


    <!-- HTML -->
<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language...</p>
</details>

<details>
  <summary>What is CSS?</summary>
  <p>CSS stands for Cascading Style Sheets...</p>
</details>

<details>
  <summary>What is JavaScript?</summary>
  <p>JavaScript adds interactivity to web pages.</p>
</details>


<!-- CSS -->
details {
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}

summary {
  font-weight: bold;
  cursor: pointer;
}


<!-- JS -->
function toggleCode() {
  const code = document.getElementById("codeBlock");
  const btn = document.querySelector(".toggle-btn");
  if (code.style.display === "block") {
    code.style.display = "none";
    btn.innerText = "See Code";
  } else {
    code.style.display = "block";
    btn.innerText = "Show Less";
  }
}

Always Open Accordion

Section 1 (Always Open)

This section is always open and cannot be collapsed.

Section 2

This section can be opened or closed.

Section 3

This section can also be opened or closed.


            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accordion - First Always Open</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="accordion">

    <!-- Always Open Section -->
    <div class="accordion-item always-open">
      <div class="accordion-header">Section 1 (Always Open)</div>
      <div class="accordion-body" style="display: block;">
        <p>This section is always open and cannot be collapsed.</p>
      </div>
    </div>

    <!-- Toggleable Section 2 -->
    <div class="accordion-item">
      <div class="accordion-header">Section 2</div>
      <div class="accordion-body">
        <p>This section can be opened or closed.</p>
      </div>
    </div>

    <!-- Toggleable Section 3 -->
    <div class="accordion-item">
      <div class="accordion-header">Section 3</div>
      <div class="accordion-body">
        <p>This section can also be opened or closed.</p>
      </div>
    </div>

  </div>

  <script src="script.js"></script>
</body>
</html>




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

.accordion {
  max-width: 600px;
  margin: auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.accordion-item + .accordion-item {
  border-top: 1px solid #ddd;
}

.accordion-header {
  padding: 15px 20px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  user-select: none;
}

.accordion-item.always-open .accordion-header {
  background-color: #0056b3;
  cursor: default;
}

.accordion-body {
  display: none;
  padding: 15px 20px;
  background-color: #f9f9f9;
}



const headers = document.querySelectorAll('.accordion-header');

headers.forEach(header => {
  const item = header.parentElement;

  // Skip if it's the always-open section
  if (item.classList.contains('always-open')) return;

  header.addEventListener('click', () => {
    const body = header.nextElementSibling;
    body.style.display = body.style.display === 'block' ? 'none' : 'block';
  });
});

1 At A Time Accordion

Section 1

This is the content of section 1.

Section 2

This is the content of section 2.

Section 3

This is the content of section 3.


    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Single Open Accordion</title>
  <style>
    details {
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      background-color: #f9f9f9;
    }

    summary {
      font-weight: bold;
      cursor: pointer;
      outline: none;
    }

    details[open] {
      background-color: #e6f7ff;
    }
  </style>
</head>
<body>

  <details>
    <summary>What is HTML?</summary>
    <p>HTML stands for HyperText Markup Language.</p>
  </details>

  <details>
    <summary>What is CSS?</summary>
    <p>CSS stands for Cascading Style Sheets.</p>
  </details>

  <details>
    <summary>What is JavaScript?</summary>
    <p>JavaScript is a scripting language for web pages.</p>
  </details>

  <script>
    const allDetails = document.querySelectorAll("details");
    allDetails.forEach((detail) => {
      detail.addEventListener("click", () => {
        allDetails.forEach((other) => {
          if (other !== detail) {
            other.removeAttribute("open");
          }
        });
      });
    });
  </script>

</body>
</html>

Animated Accordion

HTML stands for HyperText Markup Language...

CSS stands for Cascading Style Sheets...

JavaScript adds interactivity to web pages.

<!-- ✅ HTML -->
<div class="animated-accordion">
  <div class="animated-accordion-item">
    <button class="animated-accordion-toggle">What is HTML?</button>
    <div class="animated-accordion-content">
      <p>HTML stands for HyperText Markup Language...</p>
    </div>
  </div>

  <div class="animated-accordion-item">
    <button class="animated-accordion-toggle">What is CSS?</button>
    <div class="animated-accordion-content">
      <p>CSS stands for Cascading Style Sheets...</p>
    </div>
  </div>

  <div class="animated-accordion-item">
    <button class="animated-accordion-toggle">What is JavaScript?</button>
    <div class="animated-accordion-content">
      <p>JavaScript adds interactivity to web pages.</p>
    </div>
  </div>
</div>

<!-- ✅ CSS -->
<style>
  .animated-accordion {
    max-width: 600px;
    margin: 2rem auto;
    font-family: sans-serif;
  }

  .animated-accordion-toggle {
    width: 100%;
    text-align: left;
    padding: 1rem;
    font-weight: bold;
    background: linear-gradient(to right, #3a7bd5, #00d2ff);
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background 0.3s ease;
    border-bottom: 1px solid #ccc;
  }

  .animated-accordion-toggle:hover {
    background: linear-gradient(to right, #2b5fa1, #00a6cc);
  }

  .animated-accordion-content {
    max-height: 0;
    overflow: hidden;
    background: #f8f8f8;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1rem;
  }

  .animated-accordion-item.active .animated-accordion-content {
    max-height: 200px;
    padding: 1rem;
  }
</style>

<!-- ✅ JavaScript -->
<script>
  const animatedToggles = document.querySelectorAll(".animated-accordion-toggle");

  animatedToggles.forEach(button => {
    button.addEventListener("click", () => {
      const parent = button.parentElement;
      const isOpen = parent.classList.contains("active");

      document.querySelectorAll(".animated-accordion-item").forEach(item => {
        item.classList.remove("active");
      });

      if (!isOpen) {
        parent.classList.add("active");
      }
    });
  });
</script>

Accordion Template

Default Accordion

Always Open Accordion

1 At A Time Accordion

Animated Accordion