I'm working on side php project and I'm just wondering how can I modify my code so that there will be only one button instead of two.
Right now, I have show and hide buttons. I'm thinking about having only one button and it will display Hide option first. after a user click Hide option then it'll change it to show.
<button type="button" class="btn btn-light" onClick="hide_div('transpose-keys');">Hide</button>
<button type="button" class="btn btn-light" onClick="show_div('transpose-keys');">Show</button>
function hide_div(e) {
$(".c").hide()
$("."+e).hide()
}
function show_div(e) {
$(".c").show()
$("."+e).show()
}
{ display: none }.setHiddable("hide-show", "target");
/**
* Ideal to set a hide/show relationship between only two elements
* @param {string} btnId The ID of the button that toggle the view
* @param {string} elementId The ID of the element to be toggled
*/
function setHiddable(btnId, elementId) {
const btn = document.querySelector(`#${btnId}`);
// Listen to clicks
btn.addEventListener("click", (ev) => {
const targetEl = document.querySelector(`#${elementId}`);
// Hide if shown
// Show if hidden
targetEl.classList.toggle("hidden");
});
}#target {
height: 100px;
width: 100px;
background: red;
}
.hidden{
display: none;
}<div id="target"> This is the element that you want to show and hide on click </div>
<button type="button" class="btn btn-light" id="hide-show">TOGGLE VIEW</button>