What is the best way to implement an onclick method on a div in order to toggle the display of information

Question

What is the best way to implement an onclick method on a div in order to toggle the display of information

I have come across similar questions, but in my case, I am working with dynamic data from an API. I want the message body to show when a user clicks on a message with only the subject, and then be able to click again to hide the body. The current functionality works fine, but I would like to add that feature.

if(data.status == 200){

    data.data.forEach(message => {            
            msg +=  `
            <div id="read">
                <p id="header">${message.subject}<span>......</span></span></p>
                <p id="body">${message.message_details}</p>
                <p>Sent on: ${message.created_on}</p>
            </div>
            <hr>`
        
    });
    document.getElementById("inbox").innerHTML = msg
    
}

javascript fetch

Answer 1

Answer №1

To start, make sure to place all of your dynamic blocks within a wrapper div, which we can name articles, for instance.

Next, add an eventListener to this wrapper to listen for the click event and then verify if the clicked element is the title. If so, toggle the hide class that is predefined in the css. See the example below:

const wrapperEl = document.querySelector('#articles');

wrapperEl.addEventListener('click', function(e){
    if(e.target.id == 'header'){
      e.target.nextElementSibling.classList.toggle('hide')
    }

});

.hide {
 display: none
}

<div id="articles">
  <div>
    <p id="header">title 1<span>......</span></p>
    <p id="body" class="hide">article content here</p>
    <p>Sent on: 02/17/2020</p>
  </div>
  <hr />
  <div>
    <p id="header">title 2<span>......</span></p>
    <p id="body" class="hide">article content here</p>
    <p>Sent on: 02/17/2020</p>
  </div>
  <hr />
  <div>
    <p id="header">title 3<span>......</span></p>
    <p id="body" class="hide">article content here</p>
    <p>Sent on: 02/17/2020</p>
  </div>
  <hr />
  <div>
    <p id="header">title 4<span>......</span></p>
    <p id="body" class="hide">article content here</p>
    <p>Sent on: 02/17/2020</p>
  </div>
</div>

NOTE: In this specific example, I have included hardcoded blocks for testing purposes. However, in your scenario, these would be fetched from an API dynamically. Regardless, they should always be enclosed within a wrapper element.

Answer 2

To start, make sure to place all of your dynamic blocks within a wrapper div, which we can name articles, for instance.

Next, add an eventListener to this wrapper to listen for the click event and then verify if the clicked element is the title. If so, toggle the hide class that is predefined in the css. See the example below:

const wrapperEl = document.querySelector('#articles');

wrapperEl.addEventListener('click', function(e){
    if(e.target.id == 'header'){
      e.target.nextElementSibling.classList.toggle('hide')
    }

});

.hide {
 display: none
}

<div id="articles">
  <div>
    <p id="header">title 1<span>......</span></p>
    <p id="body" class="hide">article content here</p>
    <p>Sent on: 02/17/2020</p>
  </div>
  <hr />
  <div>
    <p id="header">title 2<span>......</span></p>
    <p id="body" class="hide">article content here</p>
    <p>Sent on: 02/17/2020</p>
  </div>
  <hr />
  <div>
    <p id="header">title 3<span>......</span></p>
    <p id="body" class="hide">article content here</p>
    <p>Sent on: 02/17/2020</p>
  </div>
  <hr />
  <div>
    <p id="header">title 4<span>......</span></p>
    <p id="body" class="hide">article content here</p>
    <p>Sent on: 02/17/2020</p>
  </div>
</div>

NOTE: In this specific example, I have included hardcoded blocks for testing purposes. However, in your scenario, these would be fetched from an API dynamically. Regardless, they should always be enclosed within a wrapper element.

Answer 3

Answer №2

Implemented the necessary code to conceal body div, and utilized class="body" instead of id for paragraph and div elements, as they will be duplicated.

const data = [
{subject: "test123", message_details: "msg123", created_on: "12-05-2021"},
{subject: "test456", message_details: "msg456", created_on: "02-05-2020"},
{subject: "test789", message_details: "msg789", created_on: "11-07-2011"},
];

let msg = "";
data.forEach(message => {            
                msg +=  `
                <div class="read">
                    <p id="header">${message.subject}<span>......</span></span></p>
                    <p class="body">${message.message_details}</p>
                    <p>Sent on: ${message.created_on}</p>
                </div>
                <hr>`
                
});
document.getElementById("inbox").innerHTML = msg;

const bodyElements = document.querySelectorAll(".read");
bodyElements.forEach(function(bodyEle) {
  bodyEle.addEventListener("click", (e) => {
    bodyEle.children[1].classList.toggle("hide");
  });
});

.hide {
 display: none;
}

<html>
<head></head>
<body>
<h1>My title</h1>
<div id="inbox">
</div>
</body>
</html>

Answer 4

Implemented the necessary code to conceal body div, and utilized class="body" instead of id for paragraph and div elements, as they will be duplicated.

const data = [
{subject: "test123", message_details: "msg123", created_on: "12-05-2021"},
{subject: "test456", message_details: "msg456", created_on: "02-05-2020"},
{subject: "test789", message_details: "msg789", created_on: "11-07-2011"},
];

let msg = "";
data.forEach(message => {            
                msg +=  `
                <div class="read">
                    <p id="header">${message.subject}<span>......</span></span></p>
                    <p class="body">${message.message_details}</p>
                    <p>Sent on: ${message.created_on}</p>
                </div>
                <hr>`
                
});
document.getElementById("inbox").innerHTML = msg;

const bodyElements = document.querySelectorAll(".read");
bodyElements.forEach(function(bodyEle) {
  bodyEle.addEventListener("click", (e) => {
    bodyEle.children[1].classList.toggle("hide");
  });
});

.hide {
 display: none;
}

<html>
<head></head>
<body>
<h1>My title</h1>
<div id="inbox">
</div>
</body>
</html>

Answer 5

Answer №3

Avoid using repeated IDs in your code; instead, utilize classes to ensure uniqueness.

Whether you are utilizing axios or the fetch API, the approach remains the same:

axios.get('api-url').then(response => {
  // Generate HTML content here
}).then(() => {
   document.querySelectorAll('.header').forEach(x => x.addEventListener('click', toggleBody));
})

const toggleBody = (event) => {
  event.closest('.read').querySelector('.body').classList.toggle('is-open')
}

Answer 6

Avoid using repeated IDs in your code; instead, utilize classes to ensure uniqueness.

Whether you are utilizing axios or the fetch API, the approach remains the same:

axios.get('api-url').then(response => {
  // Generate HTML content here
}).then(() => {
   document.querySelectorAll('.header').forEach(x => x.addEventListener('click', toggleBody));
})

const toggleBody = (event) => {
  event.closest('.read').querySelector('.body').classList.toggle('is-open')
}

What is the best way to implement an onclick method on a div in order to toggle the display of information

Answer №1

Answer №2

Answer №3

Similar questions

Creating an Observable Collection in Angular using AngularFire2 Firestore

Is there a way to automatically activate the "Add" button when I hit the enter key in the text box?

Using AngularJS, you can pass serialized objects as query string parameters

Ajax requests are returning successful responses for GET and POST methods, however, no response is being received for

What is the best way to modify a current state object without causing an endless loop of redirects?

How can I store all selected dropdown values in the URL parameters whenever a dropdown option is changed?

React/Next Component Changes State and Clears it in useEffect

Using React to easily rearrange images by dragging and dropping them

v-bind is not recognizing modifications in the array elements (vue js)

The selection elements fail to reset correctly

Exploring the Method of Accessing data-* Attributes in Vue.js

Executing an AJAX request to insert data into MySQL

Exploring issues with jQuery

Applying a dynamic translate3d transformation on the ::after element using CSS3

What could be causing my Three.js code to fail during testing?

Adjust the size of the FabricJS canvas within a child component in VueJS

Conceal the div element if the screen size drops below a certain threshold

Exploring Angular 6's nested routes and corresponding components for child navigation

Sort through an array using criteria from another array

The expected React component's generic type was 0 arguments, however, it received 1 argument