Dropdown | Html Css And JavaScript With Free Source Code

This is The Small Project For Your Site And You Can Use It Freely In Your's As Well , As It Is Copyright Free You Can...

In This Project Technologies Are Used Is As Follows :-)

HTML
CSS
JAVASCRIPT

Download Code

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow - Dropdown chevrons</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="card"></div>
<!-- partial -->
  <script  src="./script.js"></script>
</body>
</html>

CSS

body {
  align-items: center;
  background-color: #11131e;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}
.card {
  background-color: #e5e9ff;
  border-radius: 20px;
  color: #11131e;
  box-shadow: 0px 1.2px 2.2px rgba(0, 0, 0, 0.039),
    0px 2.8px 5.3px rgba(0, 0, 0, 0.046), 0px 5.1px 10px rgba(0, 0, 0, 0.049),
    0px 9.9px 17.9px rgba(0, 0, 0, 0.051),
    0px 21.9px 33.4px rgba(0, 0, 0, 0.055), 0px 50px 80px rgba(0, 0, 0, 0.06);
  padding: 20px 0;
}

body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.name {
  font-family: sans-serif;
  margin-top: 12px;
}
.row {
  align-items: flex-start;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  height: 30px;
  height: 40px;
  justify-content: space-between;
  padding: 0 20px;
  transition: height 400ms;
  width: 200px;
}
.row.active {
  height: 120px;
}
.button {
  margin-right: 10px;
  width: 52px;
}
.icon {
  fill: none;
  margin-top: 12px;
  stroke: #000;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

function createNode(name, values) {
  function handleClick() {
    animate.animationToggle = !animate.animationToggle;
    if (!animate.animationToggle) {
      row.classList.remove("active");
    } else {
      row.classList.add("active");
    }
    animate.setAttribute(
      "values",
      animate.animationToggle
        ? values.join("; ")
        : values.slice().reverse().join("; ")
    );
    animate.beginElement();
  }

  const card = document.querySelector(".card");

  const row = document.createElement("div");
  row.onclick = handleClick;
  row.className = "row";

  const nameElement = document.createElement("div");
  nameElement.className = "name";
  nameElement.textContent = name;
  row.appendChild(nameElement);

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "16");
  svg.setAttribute("height", "16");
  svg.setAttribute("viewBox", "0 0 100 100");
  svg.setAttribute("class", "icon");

  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  path.setAttribute(
    "d",
    "M 20,35 C 20,35 36.93934,51.93934 50,65 61.702962,53.297038 80,35 80,35"
  );
  path.setAttribute("class", "arrow");

  const animate = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "animate"
  );
  animate.setAttribute("attributeName", "d");
  animate.setAttribute("dur", "0.4s");
  animate.setAttribute("repeatCount", "1");
  animate.setAttribute("fill", "freeze");
  animate.setAttribute("class", "arrowAnim");
  animate.animationToggle = false;

  path.appendChild(animate);

  svg.appendChild(path);

  row.appendChild(svg);

  card.appendChild(row);

  animate.endElement();
}

createNode("Invert", ["M 20,35 50,65 80,35", "M 20,65 50,35 80,65"]);
createNode("Climb", [
  "M 20,35 50,65 80,35",
  "M 20,65 50,50 80,35",
  "M 20,65 50,35 80,65"
]);
createNode("Seagull", [
  "M 20,35 C 20,35 36.93934,51.93934 50,65 61.702962,53.297038 80,35 80,35",
  "M 20,45 C 20,45 37.254589,42.254589 50,55 62.654565,42.345435 80,45 80,45",
  "M 20,50 C 20,50 40,50.001 50,50.001 60,50.001 80,50 80,50",
  "M 20,56.420246 C 20,56.420246 37.254589,59.165657 50,46.420246 62.654565,59.074811 80,56.420246 80,56.420246",
  "M 20,66.656854 C 20,66.656854 36.93934,49.717514 50,36.656854 61.702962,48.359816 80,66.656854 80,66.656854"
]);
createNode("Shoelaces", [
  "M 20,35 C 20,35 49.230054,65 50,65 50.769946,65 80,35 80,35",
  "M 40,40 C 40,40 61.140839,60 50,60 38.859161,60 60,40 60,40",
  "M 60,50 C 60,50 58.688999,50 50,50 41.311001,50 40,50 40,50",
  "M 40,60 C 40,60 40,40 50,40 60,40 60,60 60,60",
  "M 20,65 C 20,65 49.421223,35 50,35 50.578777,35 80,65 80,65"
]);
createNode("Hands of time", [
  "M 20,35 50,65 80,35",
  "M 11.286622,38.713395 50,60.000018 50.061728,23.074",
  "M 8.1587427,43.543855 50,55 20,25",
  "M 8.6055826,49.715 50,50.000148 8.6055826,49.715",
  "M 8.1587427,56.455761 50,44.999616 20,74.999616",
  "M 11.286622,61.286347 50,39.999724 50.061728,76.925744",
  "M 20,64.999834 50,34.999834 80,64.999834"
]);
createNode("Mustache", [
  "M 20,35 C 32.444363,47.444363 49.363649,65 50,65 50.636351,65 66.559179,48.440821 80,35",
  "M 20,40.82089 C 32.444363,53.265253 48.158622,60 50,60 51.841378,60 66.559179,52.619931 80,39.17911",
  "M 20,45.443249 C 32.444363,57.887612 48.158622,55 50,55 51.841378,55 66.559179,56.850871 80,43.410051",
  "M 20,50.840831 C 32.444363,63.285194 48.158622,50 50,50 51.841378,50 66.559179,63.031289 80,49.590469",
  "M 20,55.625181 C 39.489889,69.635216 48.158622,45 50,45 51.841378,45 60.687908,69.381312 80,54.374819",
  "M 20,60.625181 C 38.046868,60.625181 48.158622,40 50,40 51.841378,40 58.628408,59.374819 80,59.374819",
  "M 20,65.625181 C 33.335406,52.289775 48.158622,35 50,35 51.841378,35 66.564635,50.939454 80,64.374819"
]);