CODEWITHSUNDEEP
javascriptjqueryhtml
Eezo
Eezo

Reputation: 1771

Change text onclick and make other change back to default?

I have some similar text ("More about us"), i have made it change to another ("Less about us") when click and change back when click again. But now i need a solution to when i click one (first line for example and just once) and then click another (second line this time), the first line (now show "Less about us") change back to "More about us" while the second line still change to "Less about us".

HTML

<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span><br/><br/>
<span class="more">More about us</span>

JS

$('.more').click(function() {
    var s = $(this);
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
});

This is the demo

Upvotes: 7

Views: 4219

Answers (6)

user2575725
user2575725

Reputation:

Try this:

var mores = $('span.more'); //cache all once
var more = 'More about us', less = 'Less about us', txt;
mores.on('click', function(e) {
   txt = this.innerHTML; //get old text
   mores.text(more); //reset all
   this.innerHTML = txt.match(more) ? less : more; //match against old text
});


$(function() {
  var mores = $('span.more'); //cache all once
  var more = 'More about us',
    less = 'Less about us',
    txt;
  mores.on('click', function(e) {
    txt = this.innerHTML; //get old text
    mores.text(more); //reset all
    this.innerHTML = txt.match(more) ? less : more; //match against old text
  });
});
span.more {
  border: 1px solid grey;
  cursor: pointer;
  padding: 5px 9px;
  display: inline-block;
  width: 110px;
  margin-bottom: 3px;
  border-radius: 5px;
  font-family: Calibri;
  background: ghostwhite;
  box-shadow: 0px 1px 1px;
}
span.more:hover {
  box-shadow: 0px 1px 2px;
}
span.more:active {
  box-shadow: 0px 1px 1px inset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="more">More about us</span>
<span class="more">More about us</span>
<span class="more">More about us</span>
<span class="more">More about us</span>
<span class="more">More about us</span>

Upvotes: 0

Nikhil Batra
Nikhil Batra

Reputation: 3148

Change your Javascript to:

$('.more').click(function() {
    var s = $(this);
    var originaltext= s.text();
    $('.more').text('More about us');  
      s.text(originaltext);
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');

});

What it does it:

  1. Store the text of current clicked span.
  2. Change all the spans to 'More about us'.
  3. Change current text to the original.
  4. Continue with normal functionality.

See the fiddle : "http://jsfiddle.net/HFcvH/35/"

EDIT: This can also be done using .siblings() as follow:

$('.more').click(function() {
    var s = $(this);

    $(this).siblings().each(function() {
        $(this).text('More about us');  
    });

    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');

});

Explanation: This will iterate over all the siblings of current element and reset their text.

See the fiddle: "http://jsfiddle.net/ee24gcdj/1/"

It can be further reduced using(thanks Ted Nyberg for the information): 

$(this).siblings().text('More about us')

Upvotes: 7

cнŝdk
cнŝdk

Reputation: 32145

Use .not() selector to exclude the clicked one from the list of spans, here's the code you need:

$('.more').click(function() {
  var s = $(this);
  s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
  $('.more').not($(this)).each(function() {
    $(this).html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="more">More about us</span>
<br/>
<span class="more">More about us</span>
<br/>
<span class="more">More about us</span>
<br/>
<span class="more">More about us</span>
<br/>
<span class="more">More about us</span>

It's working perfectly.

Upvotes: 1

Tushar
Tushar

Reputation: 87203

See the comments inline in the code.

// When clicked on .more
$('.more').on('click', function() {

  // Text to be updated to current element
  var updateText = $(this).text() == 'More about us' ? 'Less about us' : 'More about us';

  // Update the text of elements
  $(this).text(updateText); // Set current element text

  $('.more').not(this).text('More about us'); // Set the text to the elements other than the clicked.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<span class="more">More about us</span>

<br/>
<br/>
<span class="more">More about us</span>

<br/>
<br/>
<span class="more">More about us</span>

<br/>
<br/>
<span class="more">More about us</span>

<br/>
<br/>
<span class="more">More about us</span>

jsfiddle Demo

Upvotes: 0

Ted Nyberg
Ted Nyberg

Reputation: 7391

How about...

$(this).siblings('.more').text('More about us')

...to "reset" the others before setting the text of the one just clicked?

Complete code would be something like:

$('.more').click(function() {
    var s = $(this);
    s.siblings('.more').text('More about us')
    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
});

This is more DRY-compliant, as other suggested answers repeat the conditional statement.

Upvotes: 0

mechanicals
mechanicals

Reputation: 685

Here is the fiddle: http://jsfiddle.net/kge7dbLa/1/

$(".more").on("click", function() {
    var s = $(this);

    /*  Just add this line of Code  */
    $(".more").text('More about us');

    s.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
})

Upvotes: 1

Related Questions