jQuery toggleClass example

Toggle class name on click in jQuery

by bubu

HTML

<input type="hidden" id="next-text" value="Következő">
<div id="right">
  <div id="clock">21:37</div>
  <div id="notes" onclick="toggleChords()">Toggle chords</div>
</div>
<div id="verseorder">&nbsp;<span id="tag1" class="">V1</span>&nbsp;<span id="tag2" class="currenttag">V2</span>&nbsp;<span id="tag3" class="">R1</span></div>
<div id="currentslide">
	<span title="E" class="before"></span>I see His love and mercy<br>
	<span title="C#m"></span>Washing over all our sin<br>
	The people <span title="F#m"></span>sing, the people <span title="B"></span>sing<br>
	
</div>
<div id="nextslide"><p class="nextslide">
	Ho<span title="E/G#"></span>san<span title="A"></span>na, ho<span title="B"></span>san<span title="C#m"></span>na,<br>
	Ho<span title="A"></span>sanna in the <span title="C#m"></span>high<span title="B"></span>est.<br>
	Ho<span title="E/G#"></span>san<span title="A"></span>na, ho<span title="B"></span>san<span title="C#m"></span>na,<br>
	Ho<span title="A"></span>sanna in the <span title="C#m"></span>high<span title="B"></span>est.<br>
</p></div>

CSS

body {
  background-color: black;
  font-family: sans-serif;
  overflow: hidden;
}

#currentslide {
  font-size: 20pt;
  color: white;
  padding-bottom: 0px;
}

#nextslide {
  font-size: 20pt;
  color: grey;
  padding-top: 0px;
  padding-bottom: 0px;
}

#right {
  float: right;
}

#clock {
  font-size: 15pt;
  color: yellow;
  text-align: right;
}

#notes {
  font-size: 18pt;
  color: salmon;
  text-align: right;
}

#verseorder {
  font-size: 15pt;
  color: green;
  text-align: left;
}

.currenttag {
   color: lightgreen;
   font-weight: bold;
}


/* overwrite default style */
body { overflow: auto }
#currentslide, #nextslide { margin-left: 1em; }
#notes { cursor: pointer }

/* chord style: above */
body.chords #currentslide, 
body.chords #nextslide {
	line-height: 2em;
    margin-top: .5em;
}
body.chords span[title]:empty {
	 position: absolute;
}
body.chords span[title]:empty::before {
    content: attr(title);
    position: absolute;
    top: -.3em;
    line-height: 1em;
    color: lime;
    font-weight: bold;
}
body.chords span[title]:empty.before::before { /* upbeat */
	margin-left: -1em;
}

JavaScript

function toggleChords() {
	$('body').toggleClass('chords');
}