JS code to show next button based on options

by Venkatesh Dematti

HTML

<div>

  <div>
    <h1>Funding Calc</h1>
    <h2>Sub Heding</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quos et nesciunt error quis mollitia dolores eos animi, voluptatibus fuga sequi ratione doloribus corrupti amet? Officiis praesentium iusto, tempore quibusdam?
    </p>
  </div>

<div>
  <input type="submut" value="Reset">
</div>
</div>

<input data-drupal-selector="edit-forward" type="submit" id="edit-forward" name="op" value="Next" class="button js-form-submit form-submit" data-once="drupal-ajax" style="display: block;">





<button class="next-button">Next</button>

<div class="container">
    <div class="funding-calc-header">
      <h1>Funding Calc</h1>
      <h2>Sub Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos quis ratione adipisci, placeat consectetur ex sit pariatur tempora enim ut sequi aut perspiciatis aliquam neque consequuntur voluptates sunt ipsam nihil.</p>
    </div>
    
     <div class="reset-wrapper">
       <button>Reset</button>
     </div>
</div>




<div class="container">
  <div>
  <h1>FUNDING CALCULATOR</h1>
  <h2>Step 1: Select an option</h2>
  <input type="radio" name="option" value="option1"> Option 1<br>
  <input type="radio" name="option" value="option2"> Option 2<br>
  <input type="radio" name="option" value="option3"> Option 3<br>
  <input type="radio" name="option" value="option4"> Option 4<br>
  <input type="radio" name="option" value="option5"> Option 5<br>
    <div class="content" data-option="option1">
   <button type="button">Next</button>
  </div>
</div>

<div id="contentContainer">
  <div class="content" data-option="option2">
    <h2>Content for Option 2</h2>
    <p>This is the content for Option 2.</p>
  </div>
  <div class="content" data-option="option3">
    <h2>Content for Option 3</h2>
    <p>This is the content for Option 3.</p>
  </div>
  <div class="content" data-option="option4">
    <h2>Content for Option 4</h2>
    <p>This is the...

CSS

/* Add right arrow icon using ::before pseudo-element */
input.button::before {
  content: "\2192"; /* Unicode value for right arrow */
  margin-right: 8px; /* Adjust the spacing between the icon and text */
}

/* Apply border on hover */
input.button:hover {
  border-left: 6px solid #000;
  transition: border-left-color 0.3s ease-in-out; /* Add transition for smooth effect */
}



.content {
  display: none;
}

.next-button {
  background-color:#fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 24px;
  border: 6px solid #10CFC9;
  border-radius: 4px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

.next-button::after {
  content: "→";
  font-size: 18px;
  margin-left: 8px;
}

JavaScript

// Get the radio options and content divs
const options = document.querySelectorAll('input[name="option"]');
const contentDivs = document.querySelectorAll('.content');

// Add event listener to radio options
options.forEach(option => {
  option.addEventListener('change', () => {
    // Hide all content divs
    contentDivs.forEach(div => {
      div.style.display = 'none';
    });

    // Show the corresponding content div based on the selected option
    const selectedOption = document.querySelector('input[name="option"]:checked');
    if (selectedOption) {
      const selectedValue = selectedOption.value;
      const selectedContentDiv = document.querySelector(`.content[data-option="${selectedValue}"]`);
      if (selectedContentDiv) {
        selectedContentDiv.style.display = 'block';
      }
    }
  });
});