html

<title>Toggle Options</title> <style> /* Optional: Add some styles for better appearance */ .option-container { display: inline-block; margin-right: 10px; }

.info-div {
  display: none;
  margin-top: 10px;
}

</style>

Option 1

Additional information for Option 1

Add Quantity

Option 2

Additional information for Option 2

Add Quantity

Option 3

Additional information for Option 3

Add Quantity

<script> // Function to handle radio button click function handleOptionClick(event) { const selectedInfo = event.target.getAttribute('data-info'); // Hide all info divs const infoDivs = document.querySelectorAll('.info-div'); infoDivs.forEach(div => { console.log(selectedInfo) console.log(div.getAttribute('data-info')) if (div.getAttribute('data-info').includes(selectedInfo)){ div.style.display = 'block'; } else{ div.style.display = 'none'; } }); } // Show the selected info div // console.log(`.info-div[data-info="${selectedInfo}"]`) // const selectedInfoDiv = document.querySelector(`.info-div[data-info="${selectedInfo}"]`); // console.log(selectedInfo) // console.log(selectedInfoDiv) // if (selectedInfoDiv) { // selectedInfoDiv.style.display = 'block'; // } // } // Attach click event listener to each radio button const optionRadios = document.querySelectorAll('.option-radio'); optionRadios.forEach(radio => { radio.addEventListener('click', handleOptionClick); }); </script>

script

// Function to handle radio button click function handleOptionClick(event) { const selectedInfo = event.target.getAttribute('data-info');

// Hide all info divs
const infoDivs = document.querySelectorAll('.info-div');
infoDivs.forEach(div => {
  div.style.display = 'none';
});

// Show the selected info div
const selectedInfoDiv = document.querySelector(`.info-div[data-info="${selectedInfo}"]`);
if (selectedInfoDiv) {
  selectedInfoDiv.style.display = 'block';
}

}

// Attach click event listener to each radio button const optionRadios = document.querySelectorAll('.option-radio'); optionRadios.forEach(radio => { radio.addEventListener('click', handleOptionClick); });