Accordion toggle on + an minus

Question

I have tried web search for the accordion toggle on + and - but I didn't get. I want the toggle to open the section and - sign should come and if we click on next section the previous one should close.

I have this code but it does not have + and - sign and it does not close when we open next section what should I add to do that. Please help me

Here is the code

 var acc = document.getElementsByClassName("accordion"); var i; 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"; } }); }

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <h2>Accordion</h2> <button class="accordion">Section 1</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> <button class="accordion">Section 2</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> <button class="accordion">Section 3</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>

Answer 1

Hope this is what you want.

 Array.from(document.getElementsByClassName("accordion")).forEach(elem => elem.addEventListener("click", () => { Array.from(document.getElementsByClassName("accordion")).forEach(elem => { elem.classList.remove('active'); let panel = elem.nextElementSibling; panel.style.display = "none"; elem.querySelector('span').textContent = '+'; }); elem.classList.add("active"); let panel = elem.nextElementSibling; panel.style.display = "block"; elem.querySelector('span').textContent = '-'; }));

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <h2>Accordion</h2> <button class="accordion">Section 1 <span>+</span></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> <button class="accordion">Section 2 <span>+</span></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> <button class="accordion">Section 3 <span>+</span></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>

Answer 2

Check this snippet. Hope it helps.

 $(".set > a").on("click", function() { if ($(this).hasClass("active")) { $(this).removeClass("active"); $(this).removeClass('activestate'); $(this).next(".content").slideUp(200); $(".set > ai").removeClass("fa-minus").addClass("fa-plus"); } else { $(".set > ai").removeClass("fa-minus").addClass("fa-plus"); $(this).find("i").removeClass("fa-plus").addClass("fa-minus"); $(".set > a").removeClass("active"); $(this).addClass("active"); $('.set > a').removeClass('activestate'); $(this).addClass('activestate'); $(".content").slideUp(200); $(this).next(".content").slideDown(200); } });

 .faqmodule { overflow: hidden; } .set { transition: all .3s ease-in-out; margin-top: 15px; } .set.activestate { border: 0; } .set>a { display: block; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 20px; line-height: 19px; color: #fff; position: relative; padding: 16px 30px 16px 70px; background-color: #12934c; border-radius: 20px 0; } .set p { font-weight: 400; color: #375947; font-size: 14px; padding: 0; } .set a.active { box-shadow: 0 2px 6px #ddd; } .set i { position: absolute; left: 6px; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: #51b07c; background: #fff; padding: 12px; font-size: 14px; border-radius: 15px 0; } .content { display: none; padding: 30px 6px 25px; background: #fff; }

 <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="faqmodule"> <div class="set"> <a href="javascript:void(0);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i class="fa fa-plus" aria-hidden="true"></i></a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et ipsum et diam condimentum vehicula. Aliquam sollicitudin in sapien non venenatis. Nam nec posuere augue. Etiam mi ipsum, accumsan vel turpis quis, eleifend sagittis lorem</p> </div> </div> <div class="set"> <a href="javascript:void(0);">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<i class="fa fa-plus" aria-hidden="true"></i></a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et ipsum et diam condimentum vehicula. Aliquam sollicitudin in sapien non venenatis. Nam nec posuere augue. Etiam mi ipsum, accumsan vel turpis quis, eleifend sagittis lorem</p> </div> </div> <div class="set"> <a href="javascript:void(0);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i class="fa fa-plus" aria-hidden="true"></i></a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et ipsum et diam condimentum vehicula. Aliquam sollicitudin in sapien non venenatis. Nam nec posuere augue. Etiam mi ipsum, accumsan vel turpis quis, eleifend sagittis lorem</p> </div> </div> <div class="set"> <a href="javascript:void(0);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i class="fa fa-plus" aria-hidden="true"></i></a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et ipsum et diam condimentum vehicula. Aliquam sollicitudin in sapien non venenatis. Nam nec posuere augue. Etiam mi ipsum, accumsan vel turpis quis, eleifend sagittis lorem</p> </div> </div> </div>

Answer 3

Here is the sample code you can use FontAwesome icon also.

 var acc = document.getElementsByClassName("accordion"); var panel = document.getElementsByClassName('panel'); for (var i = 0; i < acc.length; i++) { acc[i].onclick = function() { var setClasses = !this.classList.contains('active'); setClass(acc, 'active', 'remove'); setClass(panel, 'show', 'remove'); if (setClasses) { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } } function setClass(els, className, fnName) { for (var i = 0; i < els.length; i++) { els[i].classList[fnName](className); } }

 .accordion { position: relative; background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } div.panel.show { display: block; } button.accordion:after { content: '+'; position: absolute; transform: translateY(-10px); right: 2%; } button.accordion.active:after { content: '-'; position: absolute; top: 50%; transform: translateY(-10px); right: 2%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <h2>Accordion</h2> <button class="accordion">Section 1</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> <button class="accordion">Section 2</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> <button class="accordion">Section 3</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>

Answer 4

Just add this css

 .accordion::after {
        float: right;
        content: '+';
    }
    .active::after {
        float: right;
        content: '-';
    }

 var acc = document.getElementsByClassName("accordion"); var i; 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"; } }); }

 .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion::after { float: right; content: '+'; } .active::after { float: right; content: '-'; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <h2>Accordion</h2> <button class="accordion">Section 1</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> <button class="accordion">Section 2</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> <button class="accordion">Section 3</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>

Answer 5

Ther are really good example for basic Tasks on w3schools.com The add Animations and Icons and Explain how it is working: https://www.w3schools.com/howto/howto_js_accordion.asp

HTML:

 <button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div> 

CSS:

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
} 

JS:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}