Home / Questions / 15449
Accepted
Alan
Asked: 2020-06-30 14:22:44 +0800 CST 2020-06-30 14:22:44 +0800 CST

How to put the Html content to a button after clicking it again?

  • 772

I'm changing the content of a button on click, but I can't find a way to reposition the initial content after clicking it again. I use toggle to do some actions but when it comes to changing the content I haven't had any luck:

  // JQuery 
  $('#showResponse').click(function(event) {
     $('#showSend').toggle();
     $('#showResponse').toggleClass("btn-danger", "btn-primary");
     $('#showResponse').html('Volver <i class="fa fa-chevron-up" aria-hidden="true"></i>');
  });
 <!-- HTML -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

                    <div class="row ">
                        <div class="col-md-12 text-center m-b-15">
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md" id="showResponse">Responder <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md resizeDiv" id="showSend">Enviar <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        </div>
                    </div>

What I intend is that when clicking on it again, it reloads the initial content (reply)

jquery

2 Answers

  1. Just add a ifto it after you do the .toggle(). Check that it contains the class btn-danger. I leave you the script

    // JQuery 
  $('#showResponse').click(function(event) {
     $('#showSend').toggle();
     $('#showResponse').toggleClass("btn-danger", "btn-primary");
    if($('#showResponse').hasClass("btn-danger")){
      $('#showResponse').html('Volver <i class="fa fa-chevron-up" aria-hidden="true"></i>');
     }else{
      $('#showResponse').html('Responder <i class="fa fa-chevron-down" aria-hidden="true"></i>');
     }
     
  });
    <!-- HTML -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

                    <div class="row ">
                        <div class="col-md-12 text-center m-b-15">
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md" id="showResponse">Responder <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md resizeDiv" id="showSend">Enviar <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        </div>
                    </div>

    • 3
  2. Best Answer

    In this case checking the visibility of another button that you hide and show can change the text.

    // JQuery 
  $('#showResponse').click(function(event) {
     $('#showSend').toggle(0, function(){
       if($(this).is(":visible"))
          $('#showResponse').html('Responder <i class="fa fa-chevron-down" aria-hidden="true"></i>');
       else
          $('#showResponse').html('Volver <i class="fa fa-chevron-up" aria-hidden="true"></i>');
       });
     $('#showResponse').toggleClass("btn-danger", "btn-primary");
    
  });
    <!-- HTML -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

                    <div class="row ">
                        <div class="col-md-12 text-center m-b-15">
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md" id="showResponse">Responder <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md resizeDiv" id="showSend">Enviar <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        </div>
                    </div>

    • 2