How to change text in simple jQuery extension?

Question

How can I change the text [+ Add] when I click on the drop-down menu and show it [X Cancel]

But to understand what I want to achieve, this is what I show in the following two images.

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
});
});

.expand-one {
    color: #4D8FE5;
    cursor: pointer;
    font-size: 14px;
}

.content-one {
    clear: both;
    display:none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="sitesection">
    <span class="expand-one">+ Add</span>
    <div class="content-one"><input type="text" /></div>
</div>

Run codeHide result

Answer 1

For this you can use this and ternary operator .

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
    $(this).text(($(this).text() == '+ Add') ? 'X Cancel' : '+ Add')

});
});

.expand-one {
    color: #4D8FE5;
    cursor: pointer;
    font-size: 14px;
}

.content-one {
    clear: both;
    display:none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="sitesection">
    <span class="expand-one">+ Add</span>
    <div class="content-one"><input type="text" /></div>
</div>

Run codeHide result

Answer 2

Here you can try this

fiddle Link: Fiddle

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
  			$(this).text(function(i, v) {
          return v === 'X Close' ? '+ADD' : 'X Close'
        })
});
});

.expand-one {
    color: #4D8FE5;
    cursor: pointer;
    font-size: 14px;
}

.content-one {
    clear: both;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sitesection">
    <span class="expand-one">+ Add</span>
    <div class="content-one"><input type="text" /></div>
</div>

Run codeHide result

Answer 3

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
    if($(".content-one input").is(":visible")){
       $(this).text("+ Add");
    }else{
      $(this).text("X Cancel");
    }
});
});

Answer 4

  

    $(function() {
    $('.expandone').click(function(e,t){
    
        $('.contentone').slideToggle('fast');
        
        if ($(this).text() == '- Cancel')
          $(this).text("+ Add");
        else
        $(this).text("- Cancel");
               
    
    });
    });

.expandone {
    color: #4D8FE5;
    cursor: pointer;
    font-size: 14px;
}

.contentone {
        display:none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div >
<div class="contentone"><input type="text" /></div>
</div>

<span class="expandone">+ Add</span>

Run codeHide result

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
});
});

.expand-one {
    color: #4D8FE5;
    cursor: pointer;
    font-size: 14px;
}

.content-one {
    clear: both;
    display:none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="sitesection">
    <span class="expand-one">+ Add</span>
    <div class="content-one"><input type="text" /></div>
</div>

Run codeHide result

  

$(function() {
$('.expand-one').click(function(){
    $('.content-one').slideToggle('fast');
//toggle text
  $(".expand-one").toggle(function (){
        $(this).text("+ Add");
    }, function(){
        $(this).text("- Cancel");
    });
});
});

.expand-one {
    color: #4D8FE5;
    cursor: pointer;
    font-size: 14px;
}

.content-one {
    clear: both;
    display:none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="sitesection">
    <span class="expand-one">+ Add</span>
    <div class="content-one"><input type="text" /></div>
</div>

Run codeHide result