Switch between display modes by clicking using collections

Question

Switch between display modes by clicking using collections

I am trying to figure out how to create a function that will only show content for the specific element in which my button is located. Currently, when I click the button it shows content for all elements with the 'one' class, but I want it to display content only for the related element.

I have attempted to assign a class to buttons and loop through them, however, I am struggling to understand how to achieve this.

function specificButtonFunction(){
    
    let x = document.getElementsByClassName("one");

    for(i=0; i<x.length; i++){
        
        if (x[i].style.display === "block") {
            x[i].style.display = "none";
          } else {
            x[i].style.display = "block";
          }
    }
    
   
};

.one{
    display: none;
}

<h1>Testing</h1>
        <div class="one">
            <p>Some text</p>
        </div>
        <button onclick="specificButtonFunction()">Show more!</button>
    </div>
    <div>
        <h1>Testing</h1>
        <div class="one">
            <p>Some other text</p>
        </div>
        <button onclick="specificButtonFunction()">Show more!</button>
    </div>

javascript html css

Answer 1

Answer №1

To easily toggle the visibility of elements with the class 'one' when clicking on buttons, you can loop through all the buttons and attach an event listener to each one.

document.querySelectorAll('.open-btn').forEach(btn =>
  btn.addEventListener('click', e => {
    btn.parentElement.querySelector('.one').classList.toggle('hide');
  })
);

.hide {
  display: none;
}

<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>
<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some other text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>

Another approach is using event delegation by attaching the event listener to a static ancestor element (preferably closer than using document).

document.addEventListener('click', e => {
  if (e.target.matches('.open-btn')) {
    e.target.parentElement.querySelector('.one').classList.toggle('hide');
  }
});

.hide {
  display: none;
}

<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>
<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some other text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>

Answer 2

To easily toggle the visibility of elements with the class 'one' when clicking on buttons, you can loop through all the buttons and attach an event listener to each one.

document.querySelectorAll('.open-btn').forEach(btn =>
  btn.addEventListener('click', e => {
    btn.parentElement.querySelector('.one').classList.toggle('hide');
  })
);

.hide {
  display: none;
}

<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>
<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some other text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>

Another approach is using event delegation by attaching the event listener to a static ancestor element (preferably closer than using document).

document.addEventListener('click', e => {
  if (e.target.matches('.open-btn')) {
    e.target.parentElement.querySelector('.one').classList.toggle('hide');
  }
});

.hide {
  display: none;
}

<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>
<div>
  <h1>Testing</h1>
  <div class="one hide">
    <p>Some other text</p>
  </div>
  <button class="open-btn">Show more!</button>
</div>

Answer 3

Answer №2

Enclose all content within a designated element¹ and set it to trigger the "click" event. In this instance, a <main> element is utilized. Once a click occurs on the <nain>, the event handler toggleDiv is invoked.
```
const main = document.querySelector("main");
            
main.addEventListener("click", toggleDiv);
```
The functionality of the event handler toggleDiv is such that it filters the "click" event to specific elements while disregarding others. Here, only clicked <buttons> will respond. Refer to the comments in the example for further intricacies.
This coding paradigm is known as event delegation. It involves a single element² listening for a triggered event registered either on itself or any nested component. The range of elements³ reacting to a directly activated registered event can be comprehensive (e.g., div), precise (e.g., #IdOfElement), or anything in between (e.g., .classNameOfElements). The quantity of such elements is unlimited, and dynamically added elements are also covered. Hence, having eventListeners for every element at creation or page load isn't necessary.

¹^{Element/Object can refer to <body>, <html>, document, or even window.}

²^{event.currentTarget}

³^event.target

Example

Answer 4

Enclose all content within a designated element¹ and set it to trigger the "click" event. In this instance, a <main> element is utilized. Once a click occurs on the <nain>, the event handler toggleDiv is invoked.
```
const main = document.querySelector("main");
            
main.addEventListener("click", toggleDiv);
```
The functionality of the event handler toggleDiv is such that it filters the "click" event to specific elements while disregarding others. Here, only clicked <buttons> will respond. Refer to the comments in the example for further intricacies.
This coding paradigm is known as event delegation. It involves a single element² listening for a triggered event registered either on itself or any nested component. The range of elements³ reacting to a directly activated registered event can be comprehensive (e.g., div), precise (e.g., #IdOfElement), or anything in between (e.g., .classNameOfElements). The quantity of such elements is unlimited, and dynamically added elements are also covered. Hence, having eventListeners for every element at creation or page load isn't necessary.

¹^{Element/Object can refer to <body>, <html>, document, or even window.}

²^{event.currentTarget}

³^event.target

Example

Switch between display modes by clicking using collections

Answer №1

Answer №2

Similar questions

What is the best way to link labels with input fields located separately in Angular?

Custom server not required for optional dynamic routes in NextJS version 9.5.2

Ensure history.back() does not trigger Confirm Form Resubmission

React does not display the items enclosed within the map function

encounter with file compression using gzip

Utilizing a foreach loop to control the behavior of two distinct radio buttons as a unified

Use jQuery to assign a value of "true" when a checkbox is

PHP, jQuery, and MySQL combine to create a powerful autocomplete feature for your

Executing MySQL queries synchronously in Node.js

Encountering an Axios Error 404 while attempting to save my information to the MongoDB database

Is it acceptable for Single Page Web Apps to have multiple requests at startup?

The white-space property disrupts the normal width of elements

Using JQuery functions from other JavaScript files is Simple

Guide on triggering a modal upon receiving a function response in React

Obtaining an XML element within an XSLT transformation

Upon installation of Next.js, an error in the globals.css file quickly emerged, yet remarkably, it did not disrupt the code in

What is the best way to design a grid with various squares in React Native?

Displaying a message text upon successful AJAX request

How about a CSS grid featuring squares with square images?

Utilizing the Bootstrap grid system to dynamically adjust column width based on specific conditions