jQuery toggleClass example

Toggle class name on click in jQuery

by Kelly Hawker

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="eaFeatAstra">
      <div class="homeIcon"><p>rocket</p></div>
      <div class="output"></div>
      <i class="eaIcon fa"></i>
      <h3>astraTitle</h3>
      <p>astraDescription</p>
      <p><a href="{{astraLink}}">Read More</a></p>
    </div>
    <div class="eaFeatAstra">
      <div class="homeIcon"><p>briefcase</p></div>
      <div class="output"></div>
      <i class="eaIcon fa"></i>
      <h3>astraTitle</h3>
      <p>astraDescription</p>
      <p><a href="{{astraLink}}">Read More</a></p>
    </div>
    <div class="eaFeatAstra">
      <div class="homeIcon"><p>users</p></div>
      <div class="output"></div>
      <i class="eaIcon fa"></i>
      <h3>astraTitle</h3>
      <p>astraDescription</p>
      <p><a href="{{astraLink}}">Read More</a></p>
    </div>

CSS

.eaFeatAstra { width:30%; float:left; margin:1.5%; }
.homeIcon { color:#ccc; }

JavaScript

$('.eaFeatAstra').each(function (i) {
var x = $(this).find(".homeIcon").find("p").text();
$(this).find(".eaIcon").addClass("fa-" + x);
});