Question

Technologies:

javascript

css

jquery

Tolerim

2 hours ago

What is the method for concealing extraneous divs in an HTML email template for a Contact Form 7?

In my contact form 7, I have implemented a conditional form with a dropdown menu that includes various options, along with respective divs for each one. I created an HTML mail template with these divs, and when a user selects an option from the dropdown menu, the corresponding div is displayed while the others are hidden. So, based on the selected option from the dropdown, the correct div will be displayed. Can you suggest how to achieve this?

You can view my contact form at this link (https://taylorapartmentlocator.com/contact/) and find a screenshot of my form here. For the HTML mail template, click here.

Below is the HTML code for the conditional form:

<div class="conditonal-value">
                                          <span class="special-coditional-title">For Dallas:</span><br>
                                          <span class="basic-value-text"><span class="span-title">Dallas Fort Worth:</span> [DallasFortWorth]</span><br>
                                          <span class="basic-value-text"><span class="span-title">Dallas Surroundings:</span> [DallasSurroundings]</span><br>
                                          <span class="basic-value-text"><span class="span-title">Dallas Surrounding Irving:</span> [DallasSurroundingIrving]</span><br>
                                          <span class="basic-value-text"><span class="span-title">Plano:</span> [Plano]</span><br>
                                          <span class="basic-value-text"><span class="span-title">Ft. Worth:</span> [FtWorth]</span><br>
                                          <span class="basic-value-text"><span class="span-title">Ft Worth Surroundings:</span> [FtWorthSurroundings]</span><br>
                                          <span class="basic-value-text"><span class="span-title">Arlington:</span> [Arlington]</span><br>
                                          <span class="basic-value-text">  <span class="span-title"> Mid Cities:</span> [MidCities]</span><br>
                                        </div>



                                        <div class="conditonal-value" >
                                          <span class="special-coditional-title">For Houston:</span><br>
                                          <span class="basic-value-text">   <span class="span-title"> Inner Loop:</span> [InnerLoop]</span><br>
                                          <span class="basic-value-text">  <span class="span-title"> North East:</span> [NorthEast]</span><br>
                                          <span class="basic-value-text">   <span class="span-title"> North West:</span> [NorthWest]</span><br>
                                          <span class="basic-value-text">  <span class="span-title"> South East:</span> [SouthEast]</span><br>
                                          <span class="basic-value-text">  <span class="span-title">  South East (Cont.):</span> [SouthEastCont]</span><br>
                                          <span class="basic-value-text">   <span class="span-title"> South West:</span> [SouthWest]</span>
                                        </div>

Answers(1)

Accepted Answer

To achieve this functionality, you can use JavaScript and CSS. First, give each of the divs a class name that is the same as their corresponding option value in the dropdown. For example, the div with the options for Dallas can have a class name of "Dallas" and the div with the options for Houston can have a class name of "Houston". Next, you can use CSS to hide all divs except for the one with the class name that corresponds to the currently selected dropdown option. You can do this using the display: none; property to hide the divs and display: block; to show the one that you want to display. Finally, you can use JavaScript to listen for changes in the dropdown and show/hide the appropriate div accordingly. You can use the addEventListener method to add an event listener to the dropdown and the classList property to add/remove the display: none; and display: block; CSS rules to the appropriate divs. Here is some example code to get you started:

const dropdown = document.getElementById('dropdown');
const options = document.querySelectorAll('.conditonal-value');

dropdown.addEventListener('change', (event) => {
  const selectedOption = event.target.value;
  options.forEach(option => {
    if (option.classList.contains(selectedOption)) {
      option.style.display = 'block';
    } else {
      option.style.display = 'none';
    }
  });
});

In this example, we first get references to the dropdown element and all of the divs that contain the conditional values. We then add an event listener to the dropdown that listens for changes. When the dropdown changes, we get the selected option's value and loop through all of the divs to show the one that matches the selected option and hide all of the others. To show/hide the divs, we use the style property to modify the display CSS rule.