Create a "read more" and "read less" link without using jQuery

Question

Create a "read more" and "read less" link without using jQuery

For a college assignment, I need to dynamically insert new paragraphs when the "more" link is clicked and remove them when the "less" link is clicked. We are not allowed to use CSS or jQuery for this task. My current code for this functionality is below. The insertion works correctly, but the removal does not work as expected. Any thoughts on why this might be happening? I've tried putting an alert in the less() function and using return false on the anchor tag, but it doesn't prevent the page from redirecting.

window.onload = function()
{
    var href = document.getElementById("more");
    href.setAttribute("onclick","more(); return false;");
    var more = document.getElementById("more");
    more.onclick = function more()
    {   
        var para1 = document.createElement("p");
        para1.setAttribute("id", "para1");  
        var para1Cont = document.createTextNode("my text block 1");
        para1.appendChild(para1Cont);
        var more = document.getElementById("more");
        more.parentNode.insertBefore(para1, more);
        
        var para2 = document.createElement("p");
        para2.setAttribute("id", "para2");
        var para2Cont = document.createTextNode("My text block 2");
        para2.appendChild(para2Cont);
        more.parentNode.insertBefore(para2, more);
        
        var toLess = more.setAttribute("id", "less");
        var less = document.getElementById("less");
        less.setAttribute("onclick", "less(); return false;");
        less.innerHTML ="click here for less";
        
        return false;
    };
    
    var less = document.getElementById("less");
    less.onclick = function less()
    {
        var para1 = document.getElementById("para1");
        var para2 = document.getElementById("para2");
        
        alert("fr");
        alert( para1.innerHTML);
        
        para1.parentNode.removeChild(para1);
        para2.parentNode.removeChild(para2);
        
        var less = document.getElementById("less");
        var toMore = less.setAttribute("id", "more");
        var more = document.getElementById("more");
        more.setAttribute("onclick", "more(); return false;");
        more.innerHTML ="click here for more";
        
        return false;
     }; 
};

And here's the corresponding HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
<title>Help meeeee</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
    <link href="scripts/mystyles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      <h1>test page</h1>
    </div>
    <div id="content">
       <a href="nojs.htm"  id="more"> click for more </a>
    </div>
    <script type="text/javascript" src="scripts/myscript.js"></script>
  </body>

javascript css

Answer 1

Answer №1

If you're eager to learn, here's a vanilla JavaScript example that might spark your interest:

window.addEventListener('load',function l()
{//use addEventListener, to avoid mem-leaks
    "use strict";//for JSLint
    var more = document.getElementById('more'),
        less = document.getElementById('less'),
        div = more.parentNode,//3 DOM reference, to be used by event handlers
        added = [],//keep references to added elements, use as stack
        rmHandle = function(e)
        {//callback definition, don't bind unless less link should be usable
            var rm = added.pop();
            rm.parentNode.removeChild(rm);
            if (added.length === 0)
            {
                less.removeEventListener('click', rmHandle, false);
            }
            e.preventDefault();
            e.stopPropagation();
        };
    more.addEventListener('click',function(e)
    {//add node:
        var newP, count = added.length;
        e.preventDefault();
        e.stopPropagation();
        if (count === 0)
        {//bind less event handler here
            less.addEventListener('click', rmHandle, false);
        }
        ++count;
        newP = document.createElement('p');//create node
        newP.setAttribute('id','param'+count);//set id
        newP.appendChild(document.createTextNode('New Paragraph #'+count));//add txt content
        added.push(newP);//keep reference to node
        div.insertBefore(newP, less);//append at end...
    },false);
    window.removeEventListener('load',l,false);//unbind load handler, this is the leak in IE
}, false);

For a more meaningful demonstration, check out this fiddle

There are still some improvements to make like handling an unload event and hiding the less link.

To help you understand the code better, here are some key points:

addEventListener: Adopting event listeners over setting attributes directly ensures cleaner JavaScript. Directly setting attributes with setAttribute('onclick'...) is outdated practice.
l-callback: The main callback (
```
window.addEventListener('load', function l()...
```
) queries the DOM three times and assigns the references to variables for later use.
document.createTextNode: Instead of using innerHTML, it's recommended to use createTextNode.

Edit:
Here's why optimizing variable names within nested scopes can enhance performance based on an excerpt from your code:

var less = document.getElementById("less");
less.onclick = function less()
{
    //...

};

In this snippet, the name less is reused multiple times within different contexts leading to redundant DOM queries. Avoiding repetition and ensuring consistent variable types can optimize code execution.

By understanding how JavaScript resolves variable names in nested scopes, you can enhance code efficiency and reduce performance bottlenecks.

Answer 2

If you're eager to learn, here's a vanilla JavaScript example that might spark your interest:

window.addEventListener('load',function l()
{//use addEventListener, to avoid mem-leaks
    "use strict";//for JSLint
    var more = document.getElementById('more'),
        less = document.getElementById('less'),
        div = more.parentNode,//3 DOM reference, to be used by event handlers
        added = [],//keep references to added elements, use as stack
        rmHandle = function(e)
        {//callback definition, don't bind unless less link should be usable
            var rm = added.pop();
            rm.parentNode.removeChild(rm);
            if (added.length === 0)
            {
                less.removeEventListener('click', rmHandle, false);
            }
            e.preventDefault();
            e.stopPropagation();
        };
    more.addEventListener('click',function(e)
    {//add node:
        var newP, count = added.length;
        e.preventDefault();
        e.stopPropagation();
        if (count === 0)
        {//bind less event handler here
            less.addEventListener('click', rmHandle, false);
        }
        ++count;
        newP = document.createElement('p');//create node
        newP.setAttribute('id','param'+count);//set id
        newP.appendChild(document.createTextNode('New Paragraph #'+count));//add txt content
        added.push(newP);//keep reference to node
        div.insertBefore(newP, less);//append at end...
    },false);
    window.removeEventListener('load',l,false);//unbind load handler, this is the leak in IE
}, false);

For a more meaningful demonstration, check out this fiddle

There are still some improvements to make like handling an unload event and hiding the less link.

To help you understand the code better, here are some key points:

addEventListener: Adopting event listeners over setting attributes directly ensures cleaner JavaScript. Directly setting attributes with setAttribute('onclick'...) is outdated practice.
l-callback: The main callback (
```
window.addEventListener('load', function l()...
```
) queries the DOM three times and assigns the references to variables for later use.
document.createTextNode: Instead of using innerHTML, it's recommended to use createTextNode.

Edit:
Here's why optimizing variable names within nested scopes can enhance performance based on an excerpt from your code:

var less = document.getElementById("less");
less.onclick = function less()
{
    //...

};

In this snippet, the name less is reused multiple times within different contexts leading to redundant DOM queries. Avoiding repetition and ensuring consistent variable types can optimize code execution.

By understanding how JavaScript resolves variable names in nested scopes, you can enhance code efficiency and reduce performance bottlenecks.

Create a "read more" and "read less" link without using jQuery

Answer №1

Similar questions

Using Selenium to continuously scroll to the bottom of the webpage

Display a different DIV based on the presence of a URL variable, either hiding one or

What is the best way to share information among Vue3 single file component instances?

Having trouble accessing states in Redux using React Hooks, encountering an issue where property '_id' cannot be read from null

Tips for personalizing a jQuery Mobile popup

The column must have a defined value and cannot be left empty

Tween.js - Can you animate a variable using tweens?

Unlocking the Power of NextJS Keyframes

A guide on extracting data from a customized HTML table on the client side and sending it to the Flask backend

Is there unnecessary repetition of data in Angular and Requirejs?

CSS syntax highlighting in Visual Studio 2015 does not function properly when used within vbhtml razor pages

Transforming screen recording video chunks from blob into multipart for transmission via Api as a multipart

I am looking for a highly specialized jQuery selector that fits my exact requirements

Using the css function in JQuery may not always yield the desired results

When switching windows or tabs, the user interface of the browser extension vanishes

Guide to applying Bootstrap styles to a specific section of an HTML document

What steps should I take to resolve a 'Missing environment variable' issue in the Sanity platform?

What is the most effective way to update a variable from a function in Angular?

Issue with using passport.initialize() middleware in Sails.js and Passport.js combination

Why is my filtering and sorting function failing to function properly?