I am looking to dynamically change the classes based on user clicks on two different headings.
When heading one is clicked, I want the font color to turn red and be underlined in red as well. The styling changes are already set up in the respective classes. If heading two is clicked, then it should adopt these red styling characteristics. The unclicked heading will remain grey according to the "no_highlight" class.
To see an example of what I'm trying to achieve, please refer to this JSFiddle: http://jsfiddle.net/7ok991am/1/
HTML:
<div id="page_headings">
<h2 class="no_highlight">Heading One</h2>
<h2 class="no_highlight">Heading Two</h2>
</div>
CSS:
#page_headings{
overflow: hidden;
margin-bottom: 32px;
}
#page_headings h2{
float: left;
margin-right:24px;
font-size: 14px;
cursor:pointer;
}
#page_headings h2:hover{
font-weight: bold;
}
.red_highlight{
color:red;
border-bottom: 1px solid red;
}
.no_highlight{
color:#898989;
}
JS:
$('#page_headings').on('click', function(){
if($('#page_headings h2').hasClass('no_highlight')){
$(this).removeClass('no_highlight').addClass('red_highlight');
}else{
$('#page_headings h2').addClass('no_highlight');
};
});