I am working on a HTML page and I have multiple buttons at the top. I have some good animation working when one is selected, however I am trying to also get it to change the background color of the button when it is clicked on as well.

This way the user knows which button they have selected when filling out the form.

Any suggestions?

Thanks,
Kristi Carter

This message has been edited. Last edited by: <Emily McAllister>,

I would suggest adding a js click event and change the colour or the class.

I tried going down that route but couldn't figure out the actual code to make the color change. Any chance you could provide a sample?

Thanks,
Kristi Carter

Do you have the click event ?

You will need to get the control first.

You could use document.getElementById or jquery or IbComposer_getComponentById

It is just a simple case of changing the colour directly or with the class.

Many examples out there, just google it

Here is an example of code that I am using. On my page I have 5 date range buttons - daily, weekly, monthly, quarterly, year-to-date. You'll need to create a "Requests/Actions" JavaScript call for each of your buttons. The first JavaScript function name would be restoreButtonColors, and then another JavaScript function to change the color. In my example below it would be dailyBtn_onclick. You'll also need to create a new function for each of your buttons, and change the color hex values to meet your needs.

  
function restoreButtonColors() {
document.getElementById("dailyBtn").style.backgroundColor='lavender';
document.getElementById("dailyBtn").style.borderColor='lavender';
document.getElementById("dailyBtn").style.color='#4d4e53';

document.getElementById("weeklyBtn").style.backgroundColor='lavender';
document.getElementById("weeklyBtn").style.borderColor='lavender';
document.getElementById("weeklyBtn").style.color='#4d4e53';

document.getElementById("monthlyBtn").style.backgroundColor='lavender';
document.getElementById("monthlyBtn").style.borderColor='lavender';
document.getElementById("monthlyBtn").style.color='#4d4e53';

document.getElementById("quarterlyBtn").style.backgroundColor='lavender';
document.getElementById("quarterlyBtn").style.borderColor='lavender';
document.getElementById("quarterlyBtn").style.color='#4d4e53';

document.getElementById("ytdBtn").style.backgroundColor='lavender';
document.getElementById("ytdBtn").style.borderColor='lavender';
document.getElementById("ytdBtn").style.color='#4d4e53';
}

function dailyBtn_onclick() {
document.getElementById("dailyBtn").style.backgroundColor='#464e7e';
document.getElementById("dailyBtn").style.borderColor='#464e7e';
document.getElementById("dailyBtn").style.color='white';
}

Repeat for weeklyBtn_onclick, monthly, ect.

Thanks a bunch. That worked great.