How to create Accordion with (plus /minus icon) using javaScript

Create a file name as index.html. Copy and paste the code in created html file. then preview the file.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color:#13d3dc;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 1px solid #eee;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
button.accordion:after {
    content: '\002B';
    color: #fff;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
button.accordion.active:after {
    content: "\2212";
    color:#fff;
}

.active, .accordion:hover {
  background-color: #0b767b; 
  color:#fff;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.row {
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE 10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create two equal columns that sits next to each other */
.column {
  -ms-flex: 50%; /* IE 10 */
  flex: 50%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

</style>
</head>
<body>

<button class="accordion">Image Gallery</button>
<div class="panel">
 
<div class="row"> 
  <div class="column">
    <img src="https://image.shutterstock.com/image-vector/canadian-national-cultural-symbols-landmarks-600w-504700657.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/autumn-nature-hiker-girl-walking-600w-718962793.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/canada-travel-quebec-city-tourist-600w-1517742056.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/rising-moon-over-toronto-canada-600w-549400234.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/winter-mountain-road-rocky-mountains-600w-640627375.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/toronto-skyline-night-ontario-canada-600w-311349374.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/panorama-montreal-quebec-canada-saintlawrence-600w-1217932756.jpg" style="width:100%">
  </div>
  </div>
</div>

<button class="accordion">Camera Collections</button>
<div class="panel">
  <div class="row"> 
  <div class="column">
    <img src="https://image.shutterstock.com/image-illustration/digital-photo-camera-3d-icon-600w-107741804.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/blur-camcorder-while-filming-600w-558728896.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/video-camera-operator-working-his-600w-556157896.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-vector/photo-camera-banner-digital-painting-600w-746591659.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/retro-film-photo-camera-isolated-600w-528068158.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/vintage-film-camera-digital-smartphone-600w-678200800.jpg" style="width:100%">
    <img src="https://image.shutterstock.com/image-photo/photographer-camera-hand-looking-through-600w-271846127.jpg" style="width:100%">
  </div>
  </div>
</div>

<button class="accordion">Notes</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

OUTPUT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Search This Blog

Web Development Hub

How to create Accordion with (plus /minus icon) using javaScript

OUTPUT

Comments

Post a Comment

Popular posts from this blog

Image gallery filter using JavaScript

Swipe To Slide / Draggable slider using Jquery