javascript - How to remove and add class with if statement? -

i trying have classes change depending on clicked 2 headings.

if heading 1 clicked, want font color change red , have underlined red, in class bottom border. if other heading clicked want heading take on red characteristics. 1 not clicked stay grey according no highlight class.

here jsfiddle: http://jsfiddle.net/7ok991am/1/ give example of trying accomplish.

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');     }; });   

building on @rdrazard think want them switch between 2 correct?

http://jsfiddle.net/7ok991am/3/

$('#page_headings h2').on('click', function(){ if($(this).hasclass('no_highlight')){     $(this).removeclass('no_highlight').addclass('red_highlight'); }else{     $(this).addclass('no_highlight'); } $(this).siblings('h2').addclass('no_highlight'); });