Instructions for creating a function that exchanges divs with varying ids:

Question

Instructions for creating a function that exchanges divs with varying ids:

Struggling to come up with a JavaScript function to swap webpage content using .style.display = "none" or "block"? The challenge lies in dealing with multiple divs each with different IDs. The goal is to dynamically change content upon button click without reloading the page. Adapting the script to change the ID regardless of its previous state is proving to be quite the hurdle. Simply listing out all IDs and swapping them isn't an option in this case. It's essential for the content to automatically switch to the specific one designated by the button press.

I've experimented with various approaches like utilizing querySelector, substituting the ID with class, and attempting to manipulate attributes with remove / set Attribute methods to no avail. After two weeks of frustration, I'm still stumped on how to accomplish this task.

The concern lingers that bootstrap classes might be causing interference with the functionality...

If anyone has any insights or tips to offer, it would be greatly appreciated!

This being my first post here, I hope I haven't breached any rules unknowingly.

Unfortunately, I can't provide my code as it resides on my work laptop which I inadvertently left behind after completing my tasks.

javascript css bootstrap-4

Answer 1

Answer №1

Presented here is an innovative approach that follows an agnostic design, avoiding the use of HTML ids or classes.

const container = document.querySelector('.container');
const buttons = container.querySelectorAll('button');
const divs = container.querySelectorAll(':scope > div');

function handleButtonClick() {
  this.previousElementSibling.classList.toggle('hide');
}

buttons.forEach(button => {
  button.addEventListener('click', handleButtonClick);
});

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.hide {
  display: none;
}

<div class="container">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>

  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>  
</div>

Check out the code on jsFiddle

Answer 2

Presented here is an innovative approach that follows an agnostic design, avoiding the use of HTML ids or classes.

const container = document.querySelector('.container');
const buttons = container.querySelectorAll('button');
const divs = container.querySelectorAll(':scope > div');

function handleButtonClick() {
  this.previousElementSibling.classList.toggle('hide');
}

buttons.forEach(button => {
  button.addEventListener('click', handleButtonClick);
});

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.hide {
  display: none;
}

<div class="container">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>

  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>
  
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
    <button>Toggle Content</button>    
  </div>  
</div>

Check out the code on jsFiddle

Instructions for creating a function that exchanges divs with varying ids:

Answer №1

Similar questions

Unequal height among each div's elements

Unusual behavior observed during npm update operation

Is it limited to using url routes for clients to communicate with servers in a node.js web application?

"Enabling image uploads in Vue.js with TinyMCE: A step-by-step guide

Incorporate my personal design flair when utilizing third-party React.js component libraries

What is the best way to loop through values in a complex JSON structure?

Display different website content in a div when the page loads

Versatile dataTable designed to seamlessly integrate with various data structures

Is it possible for an HTML file to not recognize an external CSS stylesheet?

Unable to modify translation values in an existing ngx-translate object

How come the nth-child selector remains unaffected by other selectors?

Attempting to populate HTML content retrieved from my MySQL database

Issue found in Next.js 14: Hydration Error | Caution: Client Components can only receive plain objects from Server Components

The onreadystatechange function in AJAX is malfunctioning

I am looking for a way to save a webpage as .html/.png format after entering text in the text box. Here is the code I have

What causes a functional component's nested function to access an outdated state value?

Understanding text overflow in JavaScript and jQuery

Utilizing express and socket.io for seamless cross-domain communication

jQuery - checkboxes behaving like radio buttons

Is it possible to apply a delay function to JQuery's AjaxStart/Stop events?