Collapsible Onclick function for PNG in HTML

I am trying to build a collapsible onclick function in HTML to display an image upon clicking a plus sign to fold out to a src image.
I have accomplished this, but need to program the function to collapse and close the image once I click onto the "-" sign.

Can someone please help me with this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function myFunction() {
  document.getElementById("demo").innerHTML = `<image style="width= 100%; height:auto" src="https://sharepoint2.web.PNG"/>`;
  document.querySelector('#testButton').innerHTML = '-';
}

<!-- language: lang-html -->

<button id="testButton" onclick="myFunction()">+</button>
<p id="demo"> </p>

<!-- end snippet -->

I can't find your image. So, I use stackoverflow site's img. just change that.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var open = false; //Point

function myFunction() {   
  if(open == true){ //If now open
    document.getElementById("demo").innerHTML = '';
    document.querySelector('#testButton').innerHTML = '+'; 
    open = false;
  }else{             //If now close
    document.getElementById("demo").innerHTML = `<image style="width= 100%; height:auto" src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e"/>`; 
    document.querySelector('#testButton').innerHTML = '-'; 
    open = true;
  }    
 }

<!-- language: lang-html -->

<button id="testButton" onclick="myFunction()">+</button> 
<p id="demo"> </p>

<!-- end snippet -->

You need to track whether the button has been toggled or not, you can do this in various ways.

In this example the onclick attribute on the HTML element is changed to run a different function:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function myFunction() {
  document.getElementById("demo").innerHTML = `<image style="width= 100%; height:auto" src="https://sharepoint2.web.PNG"/>`;
  document.querySelector('#testButton').innerHTML = '-';
  document.querySelector('#testButton').setAttribute('onclick','hideImage()')
}

function hideImage() {
  document.getElementById("demo").innerHTML = ``;
  document.querySelector('#testButton').innerHTML = '+';
  document.querySelector('#testButton').setAttribute('onclick','myFunction()')
}

<!-- language: lang-html -->

<button id="testButton" onclick="myFunction()">+</button>
<p id="demo"> </p>

<!-- end snippet -->

In this example there is a global variable which tracks if the button has been toggled:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let toggle = false;
function myFunction() {
  if (toggle) {
    toggle = false;
    document.getElementById("demo").innerHTML = ``;
    document.querySelector('#testButton').innerHTML = '+';
  }
  else {
    toggle = true;
    document.getElementById("demo").innerHTML = `<image style="width= 100%; height:auto" src="https://sharepoint2.web.PNG"/>`;
    document.querySelector('#testButton').innerHTML = '-';
  }
}

<!-- language: lang-html -->

<button id="testButton" onclick="myFunction()">+</button> 
<p id="demo"> </p>

<!-- end snippet -->

In this example we use a html data attribute to track the button toggle:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function myFunction() {
  const testButton = document.querySelector('#testButton');
  switch(testButton.dataset.toggle) {
    case "on":
      testButton.dataset.toggle = "off";
      document.getElementById("demo").innerHTML = ``;
      document.querySelector('#testButton').innerHTML = '+';
      break;
    case "off":
      testButton.dataset.toggle = "on";
      document.getElementById("demo").innerHTML = `<image style="width= 100%; height:auto" src="https://sharepoint2.web.PNG"/>`;
      document.querySelector('#testButton').innerHTML = '-';
      break;
  }
}

<!-- language: lang-html -->

<button id="testButton" data-toggle="off" onclick="myFunction()">+</button>
<p id="demo"> </p>

<!-- end snippet -->