CODEWITHSUNDEEP
javascriptjquerycssfont-awesome
Javed Khan
Javed Khan

Reputation: 45

Toggle Font Awesome TitleText along with its Class

Is there a way to toggle the title attribute value of <i> ?

As if Text Title is <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> in <div class="postoption">

And I want to toggle its title text and its class with the code given below :

$('.postoption').click(function(){
    $(this).find('i').toggleClass('fa-star-o fa-star');
    $(this).find('i').toggleTitle('Favorite This Post *OR* Remove Favorite')
});

Upvotes: 1

Views: 94

Answers (3)

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

A No-Jquery solution

<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<i id='iTag' class="red" title="Favorite This Post"></i>
<button id="toggleButton" type="button"> Toggle title</button>

<script type="text/javascript">

 document.getElementById('toggleButton').onclick = function(){
    var iTag = document.getElementById('iTag'),
        iTagTitle = iTag.getAttribute('title');

    if(iTagTitle == 'Favorite This Post') {
        iTag.setAttribute('title','Remove This Post');      
    }
    else {
        iTag.setAttribute('title','Favorite This Post');        
    }   
 };

</script>
</body>
</html>

Upvotes: 1

bhansa
bhansa

Reputation: 7524

Use attr() to access the title value and then toggle it.

$('.postoption').click(function() {
  $(this).find('i').toggleClass('fa-star-o fa-star');
  var title = $(this).find('i');
 //just check the value of title and toggle the value
 console.log(title.attr("title"));
 if(title.attr("title") === "Favorite This Post"){
    title.attr("title", "Remove This Post");
 }
 else{
  title.attr("title", "Favorite This Post");
 }

});
.postoption{
  background: #ccc;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="postoption">
  <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true">Icon</i>
</div>

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You can achieve this functionality by using a simple condition like :

var target = $(this).find('i');

if( target.attr('title') == "Remove Favorite" )
    target.attr('title', "Favorite This Post");
else
    target.attr('title', "Remove Favorite");

Hope this helps.

$('.postoption').click(function() {
  $(this).find('i').toggleClass('fa-star-o fa-star');

  var target = $(this).find('i');

  if (target.attr('title') == "Remove Favorite")
    target.attr('title', "Favorite This Post");
  else
    target.attr('title', "Remove Favorite");
});
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="postoption">
  <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"></i>
</div>

Upvotes: 3

Related Questions