CODEWITHSUNDEEP
javascripttextonclick
rob
rob

Reputation: 23

Change text with different text on click

Let me preface my question with my limited understanding of web design.

I would like for the "-More-" text to become "-Less-" when clicked, then back to "-More-" when clicked again.

I already have some javascript present within the code I am trying to modify. Could this be combined with what I am asking to achieve the same result?

My javascript as follows:

function showHide(shID) {
  if (document.getElementById(shID)) {
    if (document.getElementById(shID+'-show').style.display != 'none') {
        document.getElementById(shID+'-show').style.display = 'none';
        document.getElementById(shID).style.display = 'block';
    }
    else {
        document.getElementById(shID+'-show').style.display = 'inline';
        document.getElementById(shID).style.display = 'none';
    }
  }
}

My html as follows:

  <div class="accordion">
    <p>1. Decide
    <a href="#" id="exampleone-show" class="showLink"
    onclick="showHide('exampleone');return false;"><div class="btn_show">-More-</div></a>
    <p></p>
  </div>
  <div id="exampleone" class="more">
    <p>Blah Blah Blah.</p>
  </div>

Thanks in advance.

Upvotes: 1

Views: 5190

Answers (2)

Shrey Gupta
Shrey Gupta

Reputation: 5617

jQuery is not necessary to perform this function, and it will simply make the whole script more cumbersome and slow. Simply use this pure JavaScript solution:

function showHide(i) {
if (document.getElementById("example"+i).innerHTML=="-More-") {
    document.getElementById("example"+i).innerHTML="-Less-";
    document.getElementById("more"+i).style.display = 'block';
}
else if (document.getElementById("example"+i).innerHTML=="-Less-"){
    document.getElementById("example"+i).innerHTML="-More-";
    document.getElementById("more"+i).style.display = 'none';
}
}

This code uses i as a parameter defining what link/div needs to be changed. For your HTML, use this:

<div class="accordion">
<p>1. Decide</p>
    <a href="#" id="**example1**" class="showLink" onclick="**showHide(1)**">-More-</a>
</div>
<div id="**more1**" class="more" style="display:none;">
    <p>Blah Blah Blah.</p>
</div>

Basically, you can keep on copying this HTML code multiple times for as many times you need. Just makes sure you change the parts of the code in double asterisks. (The JavaScript code works by identifying ids like example1 and example2; by passing this number into showHide(), the code can be used for multiple instances.)

Here's a JSFiddle for you: http://jsfiddle.net/3Xawv/

Upvotes: 3

Abraham P
Abraham P

Reputation: 15471

The real answer is to use jQuery, however you could do something like this, passing the click event in like so:

 <a href="#" id="exampleone-show" class="showLink"
onclick="showHide('exampleone', event);return false;">

And then on the JS side

function showHide(shID, e) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID + '-show').style.display != 'none') {
            document.getElementById(shID + '-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        } else {
            document.getElementById(shID + '-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
    target = e.target;
    element = target.getElementsByClassName('btn_show');
    html = element.innerHTML;
    element.innerHTML = "";
    if (html.indexOf("-More-") != -1) {
        element.innerHTML = "-Less-";
    } else if (html.indexOf("-Less-") != -1) {
        element.innerHTML = "-More-";
    }
}​

Clarifications: e.target will return the element that actually received the click event - in this case a link.

Upvotes: 0

Related Questions