CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Iulian Alexandru
Iulian Alexandru

Reputation: 19

Changing to default style

After this code, the css of button is still changed. I want to be back to normal css, when the button is not active.

JavaScript

$('#btn1').on('click', function() {
  $("#btn1").css({color:'red'})
  $('#story').fadeToggle(400);
});

HTML

<div id="story" style="display:none;">
    My div
</div>

<input id="btn1" type="button" value="Click Here" />

Upvotes: 0

Views: 65

Answers (3)

RossBille
RossBille

Reputation: 1489

Create a css class with the changes you want and apply it when active and remove it when inactive. For example:

JS:

$('#btn1').on('click', function() {
    $(this).addClass('active')
    $('#story').fadeToggle(400)
});

//then when the button is 'inactive' run removeClass('active')

CSS:

.active{color:red;}

Upvotes: 0

Rishi Kulshreshtha
Rishi Kulshreshtha

Reputation: 1878

HTML:

<div id="story" style="display:none;">My div</div>
<input id="btn1" type="button" value="Click Here" />

jQuery:

$('#btn1').on('click', function () {
    $(this).toggleClass('active');
    $('#story').fadeToggle(400);
});

Some CSS:

.active {
    color:#f00;
}

Working Fiddle: http://jsfiddle.net/7LaeB/

Upvotes: 0

Justinas
Justinas

Reputation: 43479

Why not add class to that button?

$('#btn1').on('click', function(){
    $(this).toggleClass('active'); // If has class, removes it, otherwise, it adds that class
    $('#story').fadeToggle(400);
});

Upvotes: 2

Related Questions