Good morning,
I have a single-page html code where I control the display of 3 divs with show / hide through a menu.
But I would like to use a single button where as each div is displayed it has a different action. Ex:
DIV 1 ativada
function botão() {
abreHome();
}
DIV 2 ativada
function botão() {
abreCatalogo();
}
Using jQuery you can easily change the label or functionality of a button when an event is triggered (in your case, when div has visibility changed, or something like that).
Here's an example using the Bootstrap collapse:
var banner = $("#banner-message")
var button = $("button")
var colaps = $("#collapseExample")
colaps.on("show.bs.collapse", function(){
button.html("Abrir link");
//altere aqui a funcionalidade tb...
})
colaps.on("hide.bs.collapse", function(){
button.html("Mudar cor");
})
button.on("click", function(){
banner.addClass("alt")
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><scripttype="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><linkrel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Mostrar painel
</a>
<div class="collapse" id="collapseExample">
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Botão alterado!</div>
<div class="card-body">
<p class="card-text">O valor do botão foi alterado, e agora ele possui novo título. Você também pode alterar sua funcionalidade.</p>
</div>
</div>
</div>
<div id="banner-message">
<p>Hello World</p>
<button>Mudar cor</button>
</div>Try something like this
const changeAction = (t) => {
const action = t.getAttribute('data-action')
return actions[action](t)
}
const actions = {
acaoUm: (t) =>{
console.log('Acão um');
t.setAttribute('data-action', 'acaoDois')
},
acaoDois: (t) =>{
console.log('Acão dois');
t.setAttribute('data-action', 'acaoUm')
},
}<div>
<span onclick="changeAction(this)" data-action="acaoUm">
um
</span>
</span>
</div>I do not handle a lot of publishing in the slack..but I did an ex here insert the link description here