CODEWITHSUNDEEP
javascriptjqueryhtml
Dante
Dante

Reputation: 57

Using a link to reveal more text with javascript

I have been trying to get a link to reveal more text with JavaScript. I know how to do it with a button but a similar approach does not seem to work with a link.

Here is my markup: 

<form name="form">      
    <a href="Home.html" onClick="more(event)">Read More</a>
</form>

<p id="atext"><p>
<script src="Home.js"></script>

And my JavaScript code:

function more() {
    e.preventDefault();
document.getElementById("atext").outerHTML = 'It touches many issues in our lives and packs a hell of a plot twist';
}

I know you can do something similar with jQuery, but the only thing I have found is to reveal text when you hover over it.

Upvotes: 0

Views: 1094

Answers (2)

Lucas Arbex
Lucas Arbex

Reputation: 909

I don't understand why you are wraping the link into a form. You can remove it from the form, and simply do something like that:

function more(e) {
    e.preventDefault();
    document.getElementById("atext").outerHTML = 'It touches many issues in our lives and packs a hell of a plot twist';
}
<a onClick="more(event)">Read More</a>
<p id="atext"></p>

Also, you can remove the href from your link, since you are preventing the default action from it.

Upvotes: 2

James
James

Reputation: 1706

You really should get out of the habit of how you're coding things, it is not only 20+yrs out of date but it is just plain dirty. Sorry for the rant!

My suggestion would be to create a function that can be reused and not just focused on an ID as if need to use again on the same page you cannot use the same ID more than once and therefore you would be replicating the function.

Also (for me!) a big no-no using onclick variable, no need... make it Object Orientated and target the click even in JS.

One more thing; how you are dynamically adding the revealed text won't do you any favours. In the eyes of SEO / SE indexing, that content will never exist as it is not content-rich! What you need to be doing is having the content actually within your HTML and using JS to simply (in simple terms, hide it) and on user action reveal the rest!

Remember "CONTENT IS KING"

I have quickly mocked up an example (could be made little better but will help you move in the right direction) for you (using jQuery which is a modern JS Library). If you are not aware of it, would advise checking it out, will actually make your life easier that original native JS.

$(function() {

  var truncate_element = $('.read-more'),
    truncate_length = 100; // truncate length to 100 characters

  truncate_element.each(function() {
    var t = $(this).text();
    if (t.length < truncate_length) return;

    $(this).html(
      t.slice(0, truncate_length) + '<span>... </span><span class="more">More</span>' +
      '<span style="display:none;">' + t.slice(truncate_length, t.length) + ' <span class="less">Less</span></span>'
    );

  });

  $('.more', truncate_element).click(function(event) {
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();
  });

  $('.less', truncate_element).click(function(event) {
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();
  });

});
.more,.less { cursor: pointer: text-decoration: underline; background: black; color: white; padding: 5px 10px; display: inline-block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<p class="read-more">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Lucas' solution I semi agree with does not need to be within form element if it does not have to be, but suggestion on removing href="" from is not a great idea not only is that invalid markup but in your case is not needed. Using an anchor with href I would only suggest as a fallback to target an element of content else on the page like href="#content" so if JS is disabled or broken could navigate down to some more content but in your case (based on question) you don't need to use a link element at all.

Incidentally, with the example above, you can just add the class "read-more" to any element you want it to truncate and function with the more and less (as per example) and as many times as you want on a single page.

Lesson(s) of the day: Code with OOJ in mind, if want to reuse the function use class, avoid writing content via JS and have within your HTML.

Upvotes: 0

Related Questions