CODEWITHSUNDEEP
javascriptjqueryhtml
Kozcoder
Kozcoder

Reputation: 3

toggle text by clicking on hyperlink

I need to toggle the text on/Off in html without hiding any of the disabled functions. The following code can toggle on and off but the problem is this:

function toggle() {
  var ele = document.getElementById("toggleText");
  var text = document.getElementById("displayText");
  if (ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "On";
  } else {
    ele.style.display = "block";
    text.innerHTML = "Turn Off";
  }
}
 <h1>Services</h1>

<h2>Subscribed Services</h2>

<ul>
  <li>Geolocation -<a id="displayText" href="javascript:toggle();">On</a> 

    <div id="toggleText" style="display: none"></div>
  </li>

  <li>E-Mail Messaging -<a id="displayText" href="javascript:toggle();">On</a>

    <div id="toggleText" style="display: none"></div>
  </li>
</ul>

What am I doing wrong?

Upvotes: 0

Views: 996

Answers (1)

empiric
empiric

Reputation: 7878

First of all some annotation to your code:

IDs have to be unique ! So use classes instead.

I hope I understand it correctly what you are trying to achieve:

HTML:

<h2>Subscribed Services</h2>
<ul>
  <li>Geolocation -<a class="displayText" href="javascript:void(0);">On</a>
  </li>
  <li>E-Mail Messaging -<a class="displayText" href="javascript:void(0);">On</a>
  </li>
</ul>

JS

$('.displayText').on('click', function(e) {

  $(this).text(function(i, s) {
      return s === 'On' ? 'Off' : 'On';
    });

});

Example

Reference:

.text()

Upvotes: 1

Related Questions