Tutorial "Making Button Group"
Goals

-
Change the visuals of all other buttons when a certain button is clicked
In particular we want for the 'pressed' button background color green and for all non pressed buttons "Background color" gray.
-
Add effects for mouse over and mouse out events.
The simple way, using block scripts and Ids and/or CSS classes
Alternatively you can use a single script block
In this variant we create for each button a script for the 'on click' event which 'resets' the visual style of all buttons and then sets the styles as desired for the pressed state.
1. First we need to give each button an unique 'Id'

repeat this step for all other buttons and set the id as it makes sense:
- TV: btnTV
- Radio: btnRadio
- DVD: btnDVD
- MediaPlayer: btnMediaPlayer
2. Then open the 'scripts' tab for "Media-Player"

3. Now create the script for "Media-Player" for the 'on-click' event

4. Add the "Set Style" block for resetting all buttons background color to gray

Repeat this for every other button as well (Step 3. you can copy & paste the block)
If every button has the CSS class "inputSourceButton", set in the 'Target' field "inputSourceButton" and set 'Mode' to "By CSS Query". This will apply the "Set Style" block to all elements in the scene having this CSS class.
5. Now add a "Set Style" block to set the "pressed" state:

Repeat this for every other button as well (you can copy & paste the block)
The fast way, using Javascript and jQuery
Please find more documentation about jQuery here
1. This variant assumes you did read the basics of the method above. Please do the steps 1. & 2. and then create new
block group for the 'load' event:

2. As next we add a 'RunScript' block to the Media-Player button, and then we edit the script:

3. Now the code!
The first variant does basically this, using ids:
- reset the background to gray if any button has been clicked
- set the background to green for any clicked button
// 1. resetting background color
// add a click handler to each button using Ids:
$('#btnDVD, #btnTV, #btnRadio, #btnMediaPlayer').on('click',function(evt){
//update background-color, notice you select elements by Id by using the '#' prefix to the buttons id:
$('#btnDVD, #btnTV, #btnRadio, #btnMediaPlayer').css('background-color','gray');
//get the clicked button
var buttonClicked = $(evt.target);
//2. set the clicked button to green:
buttonClicked.css('background-color','green');
});
The second variant does basically this, using CSS classes:
- reset the background to gray if any button has been clicked
- set the background to green for any clicked button
// 1. resetting background color
// add a click handler to each button using CSS class query, make sure all buttons have the CSS class 'inputSourceButton':
$('.inputSourceButton').on('click',function(evt){
//update background-color, notice you select elements by CSS class using the '.' prefix
$('.inputSourceButton').css('background-color','gray');
//get the clicked button
var buttonClicked = $(evt.target);
//2. set the clicked button to green:
buttonClicked.css('background-color','green');
});