Conceal the block quotes while substituting with a newline

Question

Conceal the block quotes while substituting with a newline

My HTML page contains numerous comments enclosed in blockquotes.

I attempted to implement a feature that allows users to hide all the comments with just one click by using the following JavaScript code:

const blockQuotes = document.getElementsByTagName('blockquote'); for (let i = 0; i < blockQuotes.length; i++) { blockQuotes[i].style.display = 'none'; }

The functionality works as expected, but now I am facing an issue where the blockquote elements were acting as newlines. Consequently, when I hide the blockquote elements, there are no longer any newlines present.

Is there a way to hide the blockquotes and replace them with a newline? It is important that this action does not involve deleting the text within the blockquotes, as it needs to serve as a toggle for showing or hiding comments.

javascript css

Answer 1

Answer №1

By applying the CSS property display: none, the element will no longer affect the layout of the page, essentially making it invisible without removing it completely from the document. To still have it take up space or cause some effect, an alternative method of content hiding must be utilized, such as introducing a line break.

An easy solution would involve clearing the content within a blockquote element and eliminating its default margins, resulting in an empty block that only implies a line break but occupies minimal space. To make this process reversible, it is necessary to store the original content. Here is an example:

var array = document.getElementsByTagName('blockquote');
for(var i = 0; i < array.length; i++) { 
   array[i].savedContent = array[i].innerHTML;
   array[i].innerHTML = '';
   array[i].style.margin = 0;
}

Subsequently, when restoring the content of the blockquote elements, reverse the actions by retrieving the saved content from savedContent and setting back the top and bottom margins. For consistency, it is advisable to assign fixed values to these margins so they can easily be reverted to.

Although using a property name like savedContent should be relatively safe in avoiding clashes with existing properties, for added precaution, consider utilizing a name like data-content instead, accessed through bracketed notation rather than dot notation - for instance, array[i]['data-content'].

Answer 2

By applying the CSS property display: none, the element will no longer affect the layout of the page, essentially making it invisible without removing it completely from the document. To still have it take up space or cause some effect, an alternative method of content hiding must be utilized, such as introducing a line break.

An easy solution would involve clearing the content within a blockquote element and eliminating its default margins, resulting in an empty block that only implies a line break but occupies minimal space. To make this process reversible, it is necessary to store the original content. Here is an example:

var array = document.getElementsByTagName('blockquote');
for(var i = 0; i < array.length; i++) { 
   array[i].savedContent = array[i].innerHTML;
   array[i].innerHTML = '';
   array[i].style.margin = 0;
}

Subsequently, when restoring the content of the blockquote elements, reverse the actions by retrieving the saved content from savedContent and setting back the top and bottom margins. For consistency, it is advisable to assign fixed values to these margins so they can easily be reverted to.

Although using a property name like savedContent should be relatively safe in avoiding clashes with existing properties, for added precaution, consider utilizing a name like data-content instead, accessed through bracketed notation rather than dot notation - for instance, array[i]['data-content'].

Answer 3

Answer №2

Here's an idea for achieving the desired effect:

<br class="b"><blockquote>
Some commentary goes here
</blockquote><br class="b">

You can then toggle the visibility of elements with class "b". So, when the blockquote is set to display:block, class "b" will be hidden (display:none). Conversely, if the blockquote is set to display:none, class "b" will be shown (display:inline).

Answer 4

Here's an idea for achieving the desired effect:

<br class="b"><blockquote>
Some commentary goes here
</blockquote><br class="b">

You can then toggle the visibility of elements with class "b". So, when the blockquote is set to display:block, class "b" will be hidden (display:none). Conversely, if the blockquote is set to display:none, class "b" will be shown (display:inline).

Conceal the block quotes while substituting with a newline

Answer №1

Answer №2

Similar questions

Modifying Image on Tab Click using jQuery

What is the best way to toggle the visibility of a dynamically created HTML element in ASP.NET?

Fetching data dynamically from the server using AJAX for a interactive chart with Flot

Ways to eliminate unnecessary re-rendering of components that remain unchanged?

ReactJS tables that can be filtered and sorted

Can you explain the significance of triple brackets (e.g. {{{ content }}}) in the context of Javascript/Typescript?

Using ReactJS to incorporate events with an external DOM element

Is Typescript capable of converting ES6 code to ES5 during transpilation?

Using NodeJS to generate a multipart/mixed response

Guide on sending a request to an API and displaying the retrieved information within the same Express application

AJAX request made to a specific local directory, instead of the usual localhost

Invoke an Angular service from a separate JavaScript file

Mastering the map() function in Vue.js 2

Steps for closing the menu by clicking on the link

What is the best way to update the src of an input using an onclick event?

Struggling to create a mobile-friendly design

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

What is the process for extracting an array from an object?

Obtain a collection of the corresponding keys for a given value from dictionaries

Executing the JavaScript function on a batch of 6 IDs at once (should return every 6 calls?)