Swap text by clicking on it to show / hide an element

Navigation
6

I have the following example made in JavaScript, of which is a text written "See more", that by clicking on it you are enabled to see more text:

JSFiddle Example

Code 

<head>
  <title>
    Javascript demo - expand/collapse text
  </title>
  <script language="JavaScript" type="text/javascript">
    // for displaying or hiding parts of the page
    function blocking(nr) {
      displayNew = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
      document.getElementById(nr).style.display = displayNew;
    }
  </script>
</head>

<!-- initially hide the contents of whatItIs and background -->
<body onload="blocking('whatItIs'); blocking('background');">
  <a href="" onclick="blocking('whatItIs'); return false;">See more...</a>
  <br><br>
  <div id="whatItIs">
    Pardus is a GNU/Linux distribution developed in Turkey, as a product of the Pardus Project. It was named after the Anatolian Leopard.
    <br><br>
    Pardus is an easy-to-install and -use operating system, with many enhancements to desktop usability, compatibility and security. With Pardus 1.0 (and the now-released Pardus 2007 version), users can connect to Internet, read e-mails, securely communicate with others and exploit the computer's multimedia capabilities by listening to music and watching movies.
    <br><br>
    Ladislav Bodnar, the creator of DistroWatch, wrote in his round-up of Linux/*nix in 2006 that Pardus is one of the distros he was most impressed by this year "...thanks to unique package management ideas, innovative start-up sequence and general desktop polish..."
    <br><br>
    Pardus is open source and freely distributed as a GPL (General Public License) product. It can be installed in Turkish, English, Spanish, German or Dutch.
    <br><br>
  </div>
</body>

But I have a question, when I click on "See more" the text is shown, so far so good.

Question

The code I have is working, but I'd like that by clicking "See more", the text will change to "Hide" instead of "See more". How to achieve this?

    
asked by anonymous 20.02.2014 / 11:18

4 answers

5

You can use the .text() (English) of JQuery.

I made a JSFiddle to see how it works, where I'm even changing the text of the HTML element with id="see" : 

if ($("#see").text() == "See more...")
{
    $("#see").text("hide");
}
else {
    $("#see").text("See more...");
}

Example in JSFiddle for use with .text()

    
20.02.2014 / 11:30
1

In case you want to keep the anonymity of the element that received the click, you can pass it to the blocking function, and from there check and update the text accordingly :

Example running on JSFiddle

JavaScript 

function blocking(nr, e) {

    // trocar texto
    if (typeof e !== 'undefined' && e!='') {
        e.innerHTML = (e.innerHTML=='See more...') ? 'Hide' : 'See more...';
    }

    displayNew = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
    document.getElementById(nr).style.display = displayNew;
}

HTML 

<a href="" onclick="blocking('whatItIs', this); return false;">See more...</a>

Explanation

  • In the onclick attribute, we are passing a second parameter this , which represents the element itself. 

    onclick="blocking('whatItIs', this); return false;"

  • In the function blocking we get the element in the variable e . 

    function blocking(nr, e)

    We check if it is defined and not empty because in the body tag you are calling the function to hide the text at startup. 

    if (typeof e !== 'undefined' && e!='') {

  • In a single line we update the text, checking the current one. 

    e.innerHTML = (e.innerHTML=='See more...') ? 'Hide' : 'See more...';
    • 20.02.2014 / 13:14
    1

    In addition to the option given by @CesarMiguel, if you want to use only JavaScript, you can do this: 

    function blocking(nr, click) {
    var elementStyle = document.getElementById(nr).style.display;
    var displayNew = 'none';
    var text = 'See more...';
    if (elementStyle == 'none') {
        displayNew = 'block';
        text = 'Hide text';
    }
    document.getElementById(nr).style.display = displayNew;
    document.getElementById(click).innerHTML = text;
}

    JSFiddle Example

        
    20.02.2014 / 11:35
    0

    You can use .html() also if you wanted to put HTML markers. The deference between .html() and .text() is that the first accepts HMLT and XML tags. The second one will convert the HMLT tags to text.

    Example 

    $(this).html('<a href="example.html">Link</a><b>hello</b>')

    The result of the above script would be Exactly the text described: 

    <a href="example.html">Link</a><b>hello</b>

    Now with the other example 

    $(this).text('<a href="example.html">Link</a><b>hello</b>')

    Already the result of the above script would be 

    &lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

    With escapes

    Explanation credit

        
    20.02.2014 / 13:32
    Problem connecting to SQL Server 2012 database in IIS INSERT INTO Does not send the data to the database