CODEWITHSUNDEEP
javascriptjqueryhtml
vicario
vicario

Reputation: 233

how to use toggle in button

one for add and the other for remove

<div  class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 "> 
    <button  id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
    <button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>

$(".to-follow").click(function() {
    $(this).find('button').toggle();
});

how to make the button follow got hide when click, and then the unfollow will show up. the function of button unfollow is same like that

Upvotes: 0

Views: 281

Answers (5)

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

You can do it like below.

$("#follow, #unfollow").click(function () {
    $("#follow, #unfollow").toggleClass('hidden');
});
.hidden {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
    <button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
    <button id="unfollow" class=" hidden btn btn-danger btn-block hidden">Unfollow Activities</button>
</div>

Upvotes: 1

John
John

Reputation: 770

Maybe this is better for you

$("#follow").click(function(){
$(this).html() == "Follow Activities" ? $(this).html("Unfollow Activities") : $(this).html("Follow Activities");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
  <button id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
</div>

Upvotes: 1

MD Sultan Nasir Uddin
MD Sultan Nasir Uddin

Reputation: 158

take 2 classes one for showing and another for hiding. Assign show class for the one you want to show by default and another will get hide class.

then your code will do rest of the work.

check the working example below

$(".to-follow").click(function() {
    $(this).find('button').toggle();
}); 
.show{
  display:block;
}
.hide{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 "> 
    <button  id="follow" class="btn btn-default btn-block show" data-toggle="button">Follow Activities</button>
    <button id="unfollow" class=" hidden btn btn-danger btn-block hide">Unfollow Activities</button>
</div>

Upvotes: 1

Aaron Christiansen
Aaron Christiansen

Reputation: 11837

I used this code to make it so that, when you click Follow Activities that button is disabled and Unfollow Activities is enabled, and vice versa.

$("#unfollow").click(function() {
  $("#unfollow").hide()
  $("#follow").show();
});  

$("#follow").click(function() {
  $("#follow").hide()
  $("#unfollow").show();
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="to-follow col-lg-12 col-md-12 col-sm-12 col-xs-12 "> 
  <button  id="follow" class="btn btn-default btn-block" data-toggle="button">Follow Activities</button>
  <button id="unfollow" class=" hidden btn btn-danger btn-block">Unfollow Activities</button>
</div>

If you wanted, you could also make it so that the Unfollow Activities button is disabled by default with $("#unfollow").hide() before both of those functions.

Upvotes: 0

user4227915
user4227915

Reputation:

The jQuery.toggle()-method changes the style="display:none;"-property of an element adding it or removing it if it exists, I think you just want to change the hidden-class you've added in your second button, then -to do this- you can use:

.toggleClass('hidden'); // instead of .toggle()

Hope it helps.

Upvotes: 0

Related Questions