toggle buttons

by lovromar

HTML

<div id="a" class="a1 toggleButton">
<p>    A
    </p>
</div>

<div id="b" class="b1 toggleButton">
<p>    B
    </p>
    </div>

<button id ="test">test</button>

CSS

#a,#b{
width: 200px;
    height: 200px;
    margin: 20px;            
    text-align:center;
    float: left;
    font-size: 100px;
color:#fff;
}

p{
margin-top: 25%;
margin-bottom:25%;
}


.a1, .b1{
background-color:red;
}

.a2, .b2{
    background-color: blue;

}
button{
margin-left:auto;
margin-right:auto;
margin-top: 120px;
clear: both;    
}

.toggleButtonToggled {
    background: blue;
}

JavaScript

jQuery(function() {
    jQuery(".toggleButton").click(function() {
        jQuery(".toggleButtonToggled").removeClass("toggleButtonToggled");
        jQuery(this).addClass("toggleButtonToggled");
    });
                                  
    jQuery("#test").click(function() {
        var value = jQuery(".toggleButtonToggled:first").attr('id');
        alert("Toggled button is: "+ value);
    });
});