jQuery toggleClass example

Toggle class name on click in jQuery

by SpeedLogic

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

var data = [
{"ID":"112268","Email":"[email protected]","Company's name":"Advengermedia"},
{"ID":"121110","Email":"[email protected]","Company's name":"Belive Mobile HK Company Limited"},
{"ID":"114398","Email":"[email protected]","Company's name":"Converters sp. z o.o."},
{"ID":"103249","Email":"[email protected]","Company's name":"David Cegarra Garcia"},
{"ID":"122528","Email":"[email protected]","Company's name":"Dbit marketing ltd"},
{"ID":"6371","Email":"[email protected]","Company's name":"DF Force International Ltd"},
{"ID":"96427","Email":"[email protected]","Company's name":"Digital Media Strategies Ltd"},
{"ID":"98229","Email":"[email protected]","Company's name":"DOUBLE K DIGITAL LTD"},
{"ID":"68333","Email":"[email protected]","Company's name":"EDUARDO GOMEZ PIZANO"},
{"ID":"38657","Email":"[email protected]","Company's name":"Egentic Asia Pacifc"},
{"ID":"75183","Email":"[email protected]","Company's name":"Gadmobe Interactive Limited"},
{"ID":"51741","Email":"[email protected]","Company's name":"Global Activo Soluciones"},
{"ID":"47430","Email":"[email protected]","Company's name":"Headway Digital Media Technology SLU"},
{"ID":"76076","Email":"[email protected]","Company's name":"House Tech Ads Ltd"},
{"ID":"89793","Email":"[email protected]","Company's name":"Ibrahim Ozturk"},
{"ID":"114170","Email":"[email protected]","Company's name":"K.T. Internet Marketing Promotions LTD"},
{"ID":"34443","Email":"[email protected]","Company's name":"MAGIC HAND MEDIA s.r.o"},
{"ID":"32043","Email":"[email protected]","Company's name":"Clever Gest Lda"},
{"ID":"93956","Email":"[email protected]","Company's name":"Mobile Boost"},
{"ID":"38915","Email":"[email protected]  [email protected]","Company's name":"Mobipium, Lda"},
{"ID":"123919","Email":"[email protected]","Company's...