Make a font awesome stop blinking or hidden

Question

Please I will be glad if someone can help me, I have create two buttons to control this font-awesome icon. The buttons should:

1. Turn the blinking off or on.
2. Hide or display the icon.

Thank you so much.

<i class="fa fa-chevron-right text-success Blink"></i>

CSS

.Blink { animation: blinker 0.1s cubic-bezier(.5, 0, 1, 1) infinite alternate; }
@keyframes blinker { from { opacity: 1; } to { opacity: 0; } }

Answer 1

I am not sure but this is the thing you need to do according your requirement.

 $("button").click(function(){ $(".Blink").toggle(); }); 

 .Blink { animation: blinker 0.1s cubic-bezier(.5, 0, 1, 1) infinite alternate; } @keyframes blinker { from { opacity: 1; } to { opacity: 0; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i class="fa fa-chevron-right text-success Blink">s</i> <button type="button"> Toggle</button> 

Toggle between hide and show for all elements.

For more information:- jquery toogle

Answer 2

Hope this is the requirement you are looking for ,use this as your reference

HTML

<button id="onOROff">
OFF
</button>
<button id="showORhide" value="Hide">
Hide
</button>
<i class="fa fa-chevron-right text-success Blink"></i>

CSS

.Blink { animation: blinker 0.1s cubic-bezier(.5, 0, 1, 1) infinite alternate; }
@keyframes blinker { from { opacity: 1; } to { opacity: 0; } }

Script

$("#onOROff").on('click',function(){
$("#onOROff").text(this.innerText=='OFF'?'ON':'OFF');
if(this.innerText=='ON')
$('.fa-chevron-right').removeClass('Blink');
else
$('.fa-chevron-right').addClass('Blink');
});
$("#showORhide").click(function(){
$("#showORhide").text(this.innerText=='Hide'?'Show':'Hide');
    $(".Blink").toggle();
});

Working Fiddle

Note: this is jquery dependent solution make sure we have use it only once in a js references

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Answer 3

Here are the code changes you need.

HTML:

just give a id to i tag as follows and introduce two new buttons for toggling blink and display

<i id="blink" class="fa fa-chevron-right text-success Blink"></i>
<button onclick="toggleBlink()">Toggle blink</button>
<button onclick="toggleDisplay()">Toggle display</button>

CSS:

include the following class

.hide {
  display: none;
}

Just make sure you incuding this css after including font awesome css because the font awesome class has display: inline-block property

JS:

Include below click handlers for buttons

var blinkIcon = document.getElementById("blink");

function toggleBlink() {
    blinkIcon.classList.toggle("Blink");
}

function toggleDisplay() {
    blinkIcon.classList.toggle("hide");
}

make sure you are including this script after DOM has loaded.