# Amalgamate two toggle functions into one

I want to amalgamate these two functions into one, Any ideas?

  function toggleVisibility() {

document.getElementById('regStart').style.visibility = 'hidden';
document.getElementById('regPage').style.visibility = 'visible';

document.getElementById('winlive').src = "/images/js project/WinLiveGray.png"
document.getElementById('yahoo').src = "/images/js project/YahooGray.png"
}

function toggleSave() {

document.getElementById('regStart').style.visibility = 'visible';
document.getElementById('regPage').style.visibility = 'hidden';

document.getElementById('winlive').src = "/images/js project/WinLiveDepressed.ico"
document.getElementById('yahoo').src = "/images/js project/YahooDepressed.ico"

}

• The functions are poorly named. A toggle can switch between two states in either direction, which neither does. Is that the purpose of merging, to make them into a genuine toggle? If so, why is one called ToggleVisibility and the other ToggleSave? All it seems to do is toggle visibility of two different sets of elements. – itsbruce Feb 16 '15 at 3:47
• You're absolutely right, basically when I made toggleVisibility I was intending on it being a true toggle, but I'm super new to JS and couldn't figure out how to formulate the if condition effectively. My first instinct was to set the condition based on the current state of regStart but I couldn't really find anything that explained the syntax of how to do that. I tried some other things but i think most of them were pretty.... stupid. Anyways, I am in fact hoping to turn these into a single toggle, any ideas? – dave Feb 16 '15 at 3:53

function toggleVisibility() {
var temp = document.getElementById('regStart').style.visibility
document.getElementById('regStart').style.visibility = document.getElementById('regPage').style.visibility;
document.getElementById('regPage').style.visibility = temp;

var suffix = "Gray.png";
if ( 'hidden' === temp ) {
suffix = "Depressed.ico";
}


The first insight is that you want to swap the visibility settings for regStart and regPage. So use the normal swap format with a temp variable.
The third insight is that your image paths have the same ending for all images in a particular case. So based on the value of temp (arbitrarily chosen as the shortest variable name), change the ending.