Question 179852 in Html Question posted in
Some basic documentation can be found here.

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?

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

2

Answers


  1. 0

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

    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;
  }    
 }
    <button id="testButton" onclick="myFunction()">+</button> 
<p id="demo"> </p>
    Login or Signup to reply.
  2. 0

    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:

    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()')
}
    <button id="testButton" onclick="myFunction()">+</button>
<p id="demo"> </p>

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

    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 = '-';
  }
}
    <button id="testButton" onclick="myFunction()">+</button> 
<p id="demo"> </p>

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

    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;
  }
}
    <button id="testButton" data-toggle="off" onclick="myFunction()">+</button>
<p id="demo"> </p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search