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

Display list items in HTML based on the length of an array

Facing Problem with Angular PUT Request - "Missing required request body"

An unusual occurrence with the setTimeOut function within a for loop was observed

Various redirects based on multiple referrers

How can I generate two directory-based slider instances?

Incorporating additional information into the database

Converting 2D pixel art into 3D coordinates with ThreeJS

"Enhance your webpage with a captivating opaque background image using Bootstrap

Utilizing "Content" for Responsive Image Design in Chrome Version 33.0.1750.117

What causes images to shift when resizing in Chrome, but not in Firefox or Safari?

React hitting recursion limit due to excessive shouldComponentUpdate checks

display data labels within the chart - utilizing the power of angular.js in conjunction with chart.js

What sets React$Element apart from ReactElement?

Saving information in node.js

Efficient Techniques for Concealing and Revealing Navigation Menus using HTML, CSS, and JavaScript

Stop menu items from shifting when focused

Update the background image to be smoother, with no text overlay

What is the limitation in transmitting data as a JavaScript object rather than a JSON object?

Which method is better for HTML5/JavaScript GeoLocation: Passing data to a callback function or suspending an async call using promises?

Retrieving the Selector Value during a Change Event