"Enhance your website with a 'Read More' link using

Question

"Enhance your website with a 'Read More' link using

I'm in the process of creating a simple example for displaying hidden content with a "Read More" button. The setup includes a paragraph and a button, with half of the text inside a span tag that is initially hidden. However, I have been able to implement the code successfully but now I am looking to add a fade-in effect using pure JavaScript instead of jQuery. Can anyone offer assistance with this?

var span = document.getElementsByTagName('span')[0];
var hideshow = document.getElementById('hideshow');

span.style.display = 'none';

hideshow.onclick = function() {
  span.style.display = 'block';
};

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>

<button id="hideshow">Read More</button>

javascript html css fadein

Answer 1

Answer №1

One method involves utilizing a CSS3 transition to smoothly change the opacity of an element.

In this scenario, when the button is clicked, the class fade-in is applied to the child span element.

var button = document.querySelector('.read-more');

button.addEventListener('click', function(event) {
  var span = event.target.previousElementSibling.querySelector('span');
  span.classList.add('fade-in');
});

.show-more span {
  display: inline-block;
  height: 0;
  overflow: hidden;
  transition: opacity 2s;
  opacity: 0;
}
.show-more span.fade-in {
  height: auto;
  opacity: 1;
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>

If you need a solution that applies to multiple elements, you can also consider the following:

var buttons = document.querySelectorAll('.read-more');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(event) {
    var span = event.target.previousElementSibling.querySelector('span');
    span.classList.add('fade-in');
  });
}

.show-more span {
  display: inline-block;
  height: 0;
  overflow: hidden;
  transition: opacity 2s;
  opacity: 0;
}
.show-more span.fade-in {
  height: auto;
  opacity: 1;
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>

<p class="show-more">Another shorter paragraph. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>

Answer 2

One method involves utilizing a CSS3 transition to smoothly change the opacity of an element.

In this scenario, when the button is clicked, the class fade-in is applied to the child span element.

var button = document.querySelector('.read-more');

button.addEventListener('click', function(event) {
  var span = event.target.previousElementSibling.querySelector('span');
  span.classList.add('fade-in');
});

.show-more span {
  display: inline-block;
  height: 0;
  overflow: hidden;
  transition: opacity 2s;
  opacity: 0;
}
.show-more span.fade-in {
  height: auto;
  opacity: 1;
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>

If you need a solution that applies to multiple elements, you can also consider the following:

var buttons = document.querySelectorAll('.read-more');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(event) {
    var span = event.target.previousElementSibling.querySelector('span');
    span.classList.add('fade-in');
  });
}

.show-more span {
  display: inline-block;
  height: 0;
  overflow: hidden;
  transition: opacity 2s;
  opacity: 0;
}
.show-more span.fade-in {
  height: auto;
  opacity: 1;
}

<p class="show-more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa maiores dolore earum ducimus molestiae, aut. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>

<p class="show-more">Another shorter paragraph. <span>Quisquam consequuntur, maiores et, doloremque atque provident similique consequatur totam voluptas vitae veniam, molestiae laborum.</span></p>
<button class="read-more">Read More</button>

Answer 3

Answer №2

Let's begin here

alpha.style.opacity = 0;

The goal is to smoothly transition the opacity until this point.

alpha.style.opacity = 1;

To achieve this, you must implement an asynchronous approach (setTimeout/setInterval/requestAnimationFrame) for iteration, as using a synchronous method (while/for/for-in/forEach) will cause the main thread to be blocked, hindering the browser from effectively rendering the element with the updated opacity.

function fadeTo(element) {

  function adjustOpacity() {
    if(element.style.opacity < 1) {
      requestAnimationFrame(adjustOpacity);
      element.style.opacity = Number(element.style.opacity) + 0.05;
    }
  }

  adjustOpacity();
}

Alternatively, if you prefer utilizing CSS instead of pure JS, you can accomplish this by employing classes and transitions.

.hidden {
  opacity: 0;
  transition-duration: 0.5s;
}

.visible {
  opacity: 1;
  transition-duration: 0.5s;
}

Ensure that the element initially has the hidden class upon entering the DOM, then when you're prepared to reveal it, switch it to the visible class, allowing the browser to manage the animation seamlessly.

Answer 4

Let's begin here

alpha.style.opacity = 0;

The goal is to smoothly transition the opacity until this point.

alpha.style.opacity = 1;

To achieve this, you must implement an asynchronous approach (setTimeout/setInterval/requestAnimationFrame) for iteration, as using a synchronous method (while/for/for-in/forEach) will cause the main thread to be blocked, hindering the browser from effectively rendering the element with the updated opacity.

function fadeTo(element) {

  function adjustOpacity() {
    if(element.style.opacity < 1) {
      requestAnimationFrame(adjustOpacity);
      element.style.opacity = Number(element.style.opacity) + 0.05;
    }
  }

  adjustOpacity();
}

Alternatively, if you prefer utilizing CSS instead of pure JS, you can accomplish this by employing classes and transitions.

.hidden {
  opacity: 0;
  transition-duration: 0.5s;
}

.visible {
  opacity: 1;
  transition-duration: 0.5s;
}

Ensure that the element initially has the hidden class upon entering the DOM, then when you're prepared to reveal it, switch it to the visible class, allowing the browser to manage the animation seamlessly.

Answer 5

Answer №3

let fadeDuration = 2000; // milliseconds

document.getElementById('hideshow').addEventListener('click', () => {
   requestAnimationFrame((startTime) => {
      let animateFade = (currentTime) => {
         let progress = (currentTime - startTime) / fadeDuration;
         if(progress < 1) && requestAnimationFrame(animateFade);
         span.style.opacity = 1 - progress;
      }
      animateFade(startTime);
   })
}

Answer 6

let fadeDuration = 2000; // milliseconds

document.getElementById('hideshow').addEventListener('click', () => {
   requestAnimationFrame((startTime) => {
      let animateFade = (currentTime) => {
         let progress = (currentTime - startTime) / fadeDuration;
         if(progress < 1) && requestAnimationFrame(animateFade);
         span.style.opacity = 1 - progress;
      }
      animateFade(startTime);
   })
}

"Enhance your website with a 'Read More' link using

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

ReactJS - What makes ReactJS unique compared to other technologies?

What could be the reason for this XSS script not making a request to my server?

The custom CSS cursor appears to be displaying in a pixelated manner

Ways to limit the width of content

The code below is not working as it should be to redirect to the home page after logging in using Angular. Follow these steps to troubleshoot and properly

What's the reasoning behind incorporating a superscript esf in the Zap Chance typeface?

Utilizing a 'for' loop to add a listener for a 'click' event

Utilizing the power of JavaScript within CSS styling

The group icon will dynamically change based on the selection made in the dropdown menu

Send a pair of viewmodels to the function

What is the JavaScript event object all about?

Dynamically changing click events in VueJS can be achieved using a combination of

Executing a console.log statement within an array nested inside a function of an object

Node.js JSDOM unable to locate the 'parsingMode' property in the code

Musical backdrop for an online game platform

When a node using express encounters :id, it is directed to a specific location

REG: Identifying Custom Dropdown Boxes with CAPYBARA

Tips for manipulating deeply nested arrays of objects within an array with JavaScript

Include a condition to check the value of each row (angular material)