There are a few ways to do this:

Two Buttons

html

Test

Test

css

.hidden {

display: none;

}

js

function a() {

var buttonA = document.getElementById('a');

var buttonB = document.getElementById('b');

buttonA.classList.add('hidden');

buttonB.classList.remove('hidden');

}

function b() {

var buttonA = document.getElementById('a');

var buttonB = document.getElementById('b');

buttonB.classList.add('hidden');

buttonA.classList.remove('hidden');

}

Hold State in a var

html

Test

js

var clicked = 'b'; //initial state

function x() {

switch(clicked) {

case 'a':

clicked = 'a';

a();

break;

case 'b':

clicked = 'b';

b();

break;

default: throw 'unknown state';

}

}

function a() {

//something

}

function b() {

//something

}

Re-assign listener on click (Easier with jquery)

html

Test

js

$(document).ready(function() {

$('#x').click(a());

});

function a() {

//do something then..

$('#x').click(b);

}

function b() {

//do something then..

$('#x').click(a);

}