Code:
$("#toolbar_element").append("<div class='spacer'></div>");
//PIANO-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_piano' instState='on' title='Toggle Piano'></div>");
$("#toggle_piano").css('background-image', 'url(' + "https://lh5.googleusercontent.com/-ofLsSfSsE10/AAAAAAAAAAI/AAAAAAAAABQ/ff9Z8hwloy4/photo.jpg?sz=50" + ')');
$("#toggle_piano").css('background-size', 'cover');
$("#toggle_piano").append("<div id='tgpn_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");
$("#toggle_piano").click(function() {
var instState = $( this ).attr( "instState" );
//alert(instState);
if( instState == "on" )
{
$( this ).attr( "instState", "off" );
$(".instrument0").hide();
$("#tgpn_active").css("visibility", "visible");
//alert("k");
}
else
{
$( this ).attr( "instState", "on" );
$(".instrument0").show();
$("#tgpn_active").css("visibility", "hidden");
}
});
//ACOUSTIC GUITAR-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_acguitar' instState='on' title='Toggle Acoustic Guitar'></div>");
$("#toggle_acguitar").css('background-image', 'url(' + "https://lh4.googleusercontent.com/-uD0lTHLIZPM/AAAAAAAAAAI/AAAAAAAAAFI/OZa6FJXzpoY/photo.jpg?sz=50" + ')');
$("#toggle_acguitar").css('background-size', 'cover');
$("#toggle_acguitar").append("<div id='tgag_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");
$("#toggle_acguitar").click(function() {
var instState = $( this ).attr( "instState" );
//alert(instState);
if( instState == "on" )
{
$( this ).attr( "instState", "off" );
$(".instrument1").hide();
$("#tgag_active").css("visibility", "visible");
//alert("k");
}
else
{
$( this ).attr( "instState", "on" );
$(".instrument1").show();
$("#tgag_active").css("visibility", "hidden");
}
});
//PERCUSSION-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_perc' instState='on' title='Toggle Percussion'></div>");
$("#toggle_perc").css('background-image', 'url(' + "https://lh5.googleusercontent.com/-wtdHSCdm2Gk/AAAAAAAAAAI/AAAAAAAAAEk/ae172QD66oo/photo.jpg?sz=50" + ')');
$("#toggle_perc").css('background-size', 'cover');
$("#toggle_perc").append("<div id='tgpc_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");
$("#toggle_perc").click(function() {
var instState = $( this ).attr( "instState" );
//alert(instState);
if( instState == "on" )
{
$( this ).attr( "instState", "off" );
$(".instrument2").hide();
$("#tgpc_active").css("visibility", "visible");
//alert("k");
}
else
{
$( this ).attr( "instState", "on" );
$(".instrument2").show();
$("#tgpc_active").css("visibility", "hidden");
}
});
//SMOOTH SYNTH-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_smsynth' instState='on' title='Toggle Smooth Synth'></div>");
$("#toggle_smsynth").css('background-image', 'url(' + "http://betaman.persiangig.com/eXe%20cutive/synth/u22rl.png" + ')');
$("#toggle_smsynth").css('background-size', 'cover');
$("#toggle_smsynth").append("<div id='tgss_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");
$("#toggle_smsynth").click(function() {
var instState = $( this ).attr( "instState" );
//alert(instState);
if( instState == "on" )
{
$( this ).attr( "instState", "off" );
$(".instrument3").hide();
$("#tgss_active").css("visibility", "visible");
//alert("k");
}
else
{
$( this ).attr( "instState", "on" );
$(".instrument3").show();
$("#tgss_active").css("visibility", "hidden");
}
});
//ELECTRIC GUITAR-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_elguitar' instState='on' title='Toggle Electric Guitar'></div>");
$("#toggle_elguitar").css('background-image', 'url(' + "https://cdn0.iconfinder.com/data/icons/icons-unleashed-vol1/256/-guitar.png" + ')');
$("#toggle_elguitar").css('background-size', 'cover');
$("#toggle_elguitar").append("<div id='tgeg_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");
$("#toggle_elguitar").click(function() {
var instState = $( this ).attr( "instState" );
//alert(instState);
if( instState == "on" )
{
$( this ).attr( "instState", "off" );
$(".instrument4").hide();
$("#tgeg_active").css("visibility", "visible");
//alert("k");
}
else
{
$( this ).attr( "instState", "on" );
$(".instrument4").show();
$("#tgeg_active").css("visibility", "hidden");
}
});
//BASS GUITAR-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_bsguitar' instState='on' title='Toggle Bass'></div>");
$("#toggle_bsguitar").css('background-image', 'url(' + "http://www.gingermusiccompany.com/admin/uploaded_images/image/bassiconhqcl5.png" + ')');
$("#toggle_bsguitar").css('background-size', 'cover');
$("#toggle_bsguitar").append("<div id='tgbg_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");
$("#toggle_bsguitar").click(function() {
var instState = $( this ).attr( "instState" );
//alert(instState);
if( instState == "on" )
{
$( this ).attr( "instState", "off" );
$(".instrument5").hide();
$("#tgbg_active").css("visibility", "visible");
//alert("k");
}
else
{
$( this ).attr( "instState", "on" );
$(".instrument5").show();
$("#tgbg_active").css("visibility", "hidden");
}
});
//SYNTH PLUCK-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_synthpl' instState='on' title='Toggle Synth Pluck'></div>");
$("#toggle_synthpl").css('background-image', 'url(' + "http://ipadloops.com/wp-content/uploads/2011/11/Nlog-Synth-Icon-150x150.jpg" + ')');
$("#toggle_synthpl").css('background-size', 'cover');
$("#toggle_synthpl").append("<div id='tgsp_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");
$("#toggle_synthpl").click(function() {
var instState = $( this ).attr( "instState" );
//alert(instState);
if( instState == "on" )
{
$( this ).attr( "instState", "off" );
$(".instrument6").hide();
$("#tgsp_active").css("visibility", "visible");
//alert("k");
}
else
{
$( this ).attr( "instState", "on" );
$(".instrument6").show();
$("#tgsp_active").css("visibility", "hidden");
}
});
//SCI-FI-----------------------------------------------------------
$("#toolbar_element").append("<div class='btn' id='toggle_scifi' instState='on' title='Toggle Synth Pluck'></div>");
$("#toggle_scifi").css('background-image', 'url(' + "https://cdn2.iconfinder.com/data/icons/inverticons-stroke-vol-2/32/space_ship_ufo_aliens_transport-128.png" + ')');
$("#toggle_scifi").css('background-size', 'cover');
$("#toggle_scifi").append("<div id='tgsf_active' style='width:100%; height:100%; background-color:rgba(128,0,0,0.5); visibility: hidden;'></div>");
$("#toggle_scifi").click(function() {
var instState = $( this ).attr( "instState" );
//alert(instState);
if( instState == "on" )
{
$( this ).attr( "instState", "off" );
$(".instrument7").hide();
$("#tgsf_active").css("visibility", "visible");
//alert("k");
}
else
{
$( this ).attr( "instState", "on" );
$(".instrument7").show();
$("#tgsf_active").css("visibility", "hidden");
}
});