How can i change click function when clicked second time-CodePudding

Basically i got dynamic buttons has same click event. When i click different button i have to show some different panel. i did that but user/me can't hide the panels i showed up. So i think if i can learn lets say i have number one button and number two button when they clicked they are going to show their specific panels i got it done but When i click second time on number one or number two button i want to hide that button's panels.

(only got one panel i writing in specific button's contents)

has dynamic buttons
All dynamic buttons has same click event
All the buttons has to show same panel but with different content
Want to Learn how to know which dynamic button clicked second time
Using Delphi TMS Web

so i can hide panel

CodePudding user response：

I'd recommend using a javascript function for that If you want multiple buttons to do the same it's the best option to do that

My solution:

function changeobj(objid) {
  let displaytypes = {
    "none": "inline",
    "inline": "none"
  };
  let obj = document.getElementById(objid);
  if (obj) {
    obj.style.display = displaytypes[obj.style.display] || "none";
  }
}

<body style="background-color: darkcyan;">
  <button onclick="changeobj('test')">toggleview</button>
  <br>
  <h id="test">test</h>
</body>

CodePudding user response：

you can just look for the appearance (display) state of the element (card) and toggle the flow of the function with the if condition check like this:

    const element = {style: {display: 'none'}}
    
    function toggleCard(element){
      if(element.style.display === 'none'){
        element.style.display = 'block'
        //more code
      }
      else{
        element.style.display = 'none'
        //more code
      }
    }
    
    toggleCard(element)
    
    console.log(element.style.display)