Exchange text by clicking on it to display/hide an element

Asked

Viewed 6,021 times

6

I have the following example done in Javascript, of which is a text written "See more", that when you click on it you can see more text:

Example in Jsfiddle

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 would like it if by clicking "See more", the text changed to "Hide" instead of "See more". How to achieve this goal?

javascript jquery html

4 answers

5


You can use the function .text() (English) jquery.

I made a Jsfiddle to see how it works, where I am changing the text of the HTML element with the id="see":

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

Example in Jsfiddle for use of .text()

1

In addition to the option given by @Cesarmiguel, if you want to use Javascript only, you can do so:

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

Example in Jsfiddle

1

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

Example working 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

  1. In the attribute onclick, we are passing a second parameter this, representing the element itself.

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

  2. In function blocking we receive the element in the variable e.

    function blocking(nr, e)

    We check that it is set and is not empty because in the tag body you are calling the function to hide the text at the beginning.

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

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

    e.innerHTML = (e.innerHTML=='See more...') ? 'Hide' : 'See more...';

0

You can use the .html() also if wanted to put markers HTML. The deference between .html() and .text() is that the first one accepts HMLT and XML tags. The second one will convert 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

Credit for the explanation

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.