Change onclick text and change another default value?

Question

I have a similar text ("More about us"), I changed it to another ("Less about us") when we press and change back when pressed again. But now I need a solution, when I click one (the first line, for example, only once), and then click another (the second line this time), the first line (now show "Less about us") will return to "More about us ", and the second line still changes to" Less than 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 a demonstration

Answer 1

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 does he do:

• Save the text current clicked range.
• Change all ranges to "More about us."
• Change the current text to the original.
• Continue to work with normal functionality.

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

EDIT: This can also be done with .siblings() as follows:

 $('.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 repeat all the siblings of the current item and reset their text.

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

It can be further reduced with (thanks to Ted Nyberg for the info):

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

Answer 2

Use . not () to exclude selected from the list of spans, here is 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 works great.

Answer 3

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'); }) 

Answer 4

See comments in text in 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

Answer 5

What about...

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

... to "reset" the rest before setting the text you just clicked?

The full code will look something like this:

 $('.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-compatible as the other suggested answers repeat the conditional statement.

Answer 6

Try the following:

 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>