MDL - Change + icon to - when clicked?

Question

I have an accordion in place using MDL and JS, I would like to use the + icon when the accordion is closed and when it is clicked and open I would like to display a subtract icon (-).

Would I need to do this through the MDL divs or within the JS? I know I can put in some JS which will change the icon but not sure how to link it with the MDL icons...

Heres what I have so far.

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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

  #padButton {
  padding: 0px;
  background-color: white;
  width: 100%;
  /* border: 2px; */
  /* border-color: red; */
}


/* Style the buttons that are used to open and close the accordion panel */

.accordion {
  background-color: rgb(255, 255, 255);
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  color: #444;
  cursor: pointer;
  padding: 18px;
  /* width: 100%; */
  text-align: left;
  vertical-align: center;
  border: 2px;
  outline: 2cm;
  border-color: #777;
  transition: 0.4s;
  /* box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.1); */
  /* border-radius: 2px; */
  /* overflow: hidden; */
}


/* 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: rgb(255, 255, 255);
}


/* Style the accordion panel. Note: hidden by default */

.panel {
  padding: 0px 18px;
  font-family: 'Courier New', Courier, monospace;
  /* background-color: grey; */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* border: 2px; */
  box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.05);
}

.panel:after {
  padding: 10px 18px;
}

.accordion:after {
  /* content: '\02795'; Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-amber.min.css" />


</head>

<div id="padButton" class="mdl-cell mdl-cell--6-col">
  <div class="accordion">Accordion Section 1

    <div align="right">
      <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
                <i class="material-icons">add</i>
            </button>

    </div>
  </div>

  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
      Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam
      vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui
      ante ac lectus.</p>
  </div>

</div>

Can you put your codes on codepen.io to test that online? – Omid Nikrah Sep 13 '18 at 13:26 — Omid Nikrah, Sep 13 '18 at 13:26

score 1 · Accepted Answer · answered Sep 13 '18 at 13:50

Here is the codepen of one of the ways to solve it: https://codepen.io/mlzsolti/pen/jvKVpM

Basically, what you have to do, is when you toggle the accordion, also toggle the right icon of the tag. One of the methods in this case is to set the element's innerHTML to the desired icon's name.

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        var icon = this.querySelector("i");
        if (this.classList.contains("active")) {
            icon.innerHTML = "remove";
        } else {
            icon.innerHTML = "add";
        }
        if (panel.style.maxHeight){
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        } 
    });
}

score 1 · Answer 2 · answered Sep 13 '18 at 13:52

You just need to change the value of i tag. For example, to convert plus icon to minus you should change the value to remove

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var icon = this.querySelector("i");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      icon.innerHTML = "add";
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      icon.innerHTML = "remove";
    }
  });
}

  #padButton {
  padding: 0px;
  background-color: white;
  width: 100%;
  /* border: 2px; */
  /* border-color: red; */
}


/* Style the buttons that are used to open and close the accordion panel */

.accordion {
  background-color: rgb(255, 255, 255);
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  color: #444;
  cursor: pointer;
  padding: 18px;
  /* width: 100%; */
  text-align: left;
  vertical-align: center;
  border: 2px;
  outline: 2cm;
  border-color: #777;
  transition: 0.4s;
  /* box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.1); */
  /* border-radius: 2px; */
  /* overflow: hidden; */
}


/* 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: rgb(255, 255, 255);
}


/* Style the accordion panel. Note: hidden by default */

.panel {
  padding: 0px 18px;
  font-family: 'Courier New', Courier, monospace;
  /* background-color: grey; */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* border: 2px; */
  box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.05);
}

.panel:after {
  padding: 10px 18px;
}

.accordion:after {
  /* content: '\02795'; Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-amber.min.css" />


</head>

<div id="padButton" class="mdl-cell mdl-cell--6-col">
  <div class="accordion">Accordion Section 1

    <div align="right">
      <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
                <i class="material-icons">add</i>
            </button>

    </div>
  </div>

  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
      Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam
      vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui
      ante ac lectus.</p>
  </div>

</div>

NineBerry · Answer 3 · 2018-09-13T14:35:23.160

This is an approach where the logic is completely in the CSS. This means you can change what icon is used by only changing the CSS, not having to touch the HTML or JavaScript.

In the HTML, change the button to this:

<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
  <i class="material-icons"><span class=buttontoggle></span></i>
</button>

You basically just have an empty span. The CSS will then fill in the correct content.

In the CSS, add these rules to decide the content based on the presence of the active class:

.accordion.active  .buttontoggle::after {
  content: "remove"
}
.accordion:not(.active)  .buttontoggle::after {
  content: "add"
}

Insert "remove" after the buttontoggle span when it is inside an accordian with the active class.

Insert "add" after the buttontoggle span when it is inside an accordian without the active class.

Codepen: https://codepen.io/anon/pen/Kxeaxe

score 0 · Answer 4 · answered Sep 12 '19 at 01:36

PURE CSS solution (No JS)

Found in here a bit extended: https://stackoverflow.com/a/49626209/1920145

Nevertheless I mannaged to do it even quicker...

Simply put NO CONTENT on your usual material-icons element, and adjust it with CSS for the CSS case you may want. In the link a checkbox is used.

Like this:

input+label>i::before{content:"add_box";}
input:checked+label>i::before{content:"indeterminate_check_box";}
input+label+p+i::before{content:"add_box";}
input:checked+label+p+i::before{content:"indeterminate_check_box";}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<input type="checkbox" id="myCheck">
<label for="myCheck">Inside the Label: <i class="material-icons"></i></label>
<p>Outside the Label:</p><i class="material-icons"></i>

MDL - Change + icon to - when clicked?

4 Answers4

PURE CSS solution (No JS)