CODEWITHSUNDEEP
jquery
user9037214
user9037214

Reputation:

How to change text in a simple expand jQuery?

How can I change the text of [+ Add] when I click on expand and show this [X Cancel]

But to get to the idea, what I want to achieve is what I show in the next two images.

enter image description here

enter image description here

$(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>

Upvotes: 2

Views: 69

Answers (4)

Anil
Anil

Reputation: 3752

  

    $(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>

$(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>

  

$(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>

Upvotes: 0

Harish Karthick
Harish Karthick

Reputation: 720

Here You Can Try This out
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>

Upvotes: 0

DragonBorn
DragonBorn

Reputation: 1809

You can use this and ternary operator to achieve that.

$(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>

Upvotes: 1

slon
slon

Reputation: 1030

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

Upvotes: 0

Related Questions