Using jQuery to Fade Out a DIV from multiple dropdown menus

Is there a way to fadeout the ".checkbox10" DIV only if ALL THREE of these dropdowns are reverted back to the original ("None") selection? Any help would be appreciated. Thank you.

*I have successfully implemented thisDIV fadeIn() using "change" whenever any selection is made ... everything is working fine.

<select class="planDrop" id="golfplan" name='golfplan' onchange="calculateTotal()">
    <option value="None">Make Selection &rarr;</option>
    <option value="g1">Individual</option>
    <option value="g2">Couple</option>
    <option value="g3">Family</option>
</select>

<select class="planDrop" id="tennisplan" name='tennisplan' onchange="calculateTotal()">
    <option value="None">Make Selection &rarr;</option>
    <option value="t1">Individual</option>
    <option value="t2">Couple</option>
    <option value="t3">Family</option>
</select>

<select class="planDrop" id="poolplan" name='poolplan' onchange="calculateTotal()">
    <option value="None">Make Selection &rarr;</option>
    <option value="p1">Individual</option>
    <option value="p2">Couple</option>
    <option value="p3">Family</option>
</select>


<div class="checkbox10" id="init10Section" style="display:none;">
    <div><input type="checkbox" id="init10" name='init10' onclick="calculateTotal()" /> 10% Off</div>
</div>
jqueryhtmlcssfadeout

Answer №1

Discover the solution provided below and view this interactive JSFIDDLE for reference.

JAVASCRIPT:

$('.dropDownMenu').on('change', function(){
    if($('#item1').val() == "None" && $('#item2').val() == "None" && $('#item3').val() == "None")
    {
        $('.contentBox').fadeOut(500);
    }
    else
    {
        $('.contentBox').fadeIn(1000);
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage AJAX data to dynamically generate an input field within a Laravel application

. Hey everyone, I'm currently working on implementing ajax for a search functionality. The goal is to display links to the search results' pages along with checkboxes next to each result, allowing users to select orders for printing. Although I ...

javascriptjqueryajaxlaravel-4

Modify a singular aspect of shorthand background attribute

Imagine using the shorthand background property to define multiple properties. For example: .img { background: url('/Content/images/a.png') no-repeat scroll 100% 3px; } If you need to override just the background-position of the image, sh ...

cssoverriding

Remove numerous entries from the WordPress database by selecting multiple checkboxes

A new customer table named "tblvessel" has been created in the Wordpress database. The code provided below selects records from the database and displays them as a table with checkboxes next to each record, assigning the record's 'ID' to the ...

javascriptphpjqueryhtmlwordpress

elegant tree structure dynamically loads data via AJAX when clicked

Currently, I am utilizing fancytree to build a tree structure based on data sourced from MySQL... Visit Fancytree Wiki for more information I have the intention of updating the database whenever there is a change in this structure. Below is an excerpt of ...

jqueryajaxfancytree

An Ajax call navigates to the index.html page

Could you please assist with an issue I am facing? I have written the code below to make an ajax request to a specific link. However, instead of executing the ajax call using a POST request, the page is being redirected to index.html with the link in the ...

phpjavascriptjqueryasp.netajax

What are the steps to automatically populate the location or name in the trip advisor widget?

I have encountered an issue with my website where I have multiple hotel lists but the trip advisor widget only shows one. Is there a solution, such as a script or other method, that can use variables to automatically set the location or name in the widget? ...

javascriptjqueryangularjs

Ways to eliminate undesired margin

I am struggling with formatting an HTML list into columns and I can't seem to remove the space between each column. It's frustrating because I want the list to display like rows, without any spacing or at least the ability to control the size of ...

htmlcsshtml-lists

Incorporating a variety of images into this hexagonal design framework

Hello there! I am just starting to learn CSS and HTML, and I have a question. Is it possible for me to use the same CSS styling but have different images inside each of the hexagons? I want to replace the image '' with multiple images without rep ...

htmlcsscss-shapes

`What purpose does the data-view attribute serve in Durandal JS?`

While experimenting with the Durandal JS starter kit application, I happened to view the page source in Mozilla browser and noticed the following. <div class="" data-view="views/shell" style="" data-active-view="true"> </div> I couldn't ...

javascripthtmldurandal

Alignment of Bootstrap 5 card text and buttons

I've been diving into the BootStrap 5 Crash Course from this YouTube link: https://www.youtube.com/watch?v=4sosXZsdy-s. The final website from the tutorial can be found here: One specific part focuses on using Cards, but I'm facing an issue wher ...

htmlcssbootstrap-5

Position the paper-icon-button so that it is aligned to the top-right corner of the scaffold

Looking for a way to... <core-scaffold id="core_scaffold"> <core-header-panel mode="seamed" id="core_header_panel" navigation flex> <core-toolbar id="core_toolbar"></core-toolbar> <core-menu valueattr="label" ...

htmlcsspolymer

Bootstrap 4 Alpha Grid does not support aligning two tables side by side

When working with Bootstrap 4, I am aware that the .col-xs classes have been removed. Instead of using .col, I have tested it on Bootstrap 3.5 which is currently being utilized. <div class="col-xs-4"> Table content for left ...

csstwitter-bootstrapbootstrap-4

Identify the month in which there is no data available in the database

The existing query is working perfectly, but the issue is that there is no data for the current month (April), causing it not to list the month with 0 interviews. How can I make it so that the month is listed with 0 interviews? QUERY select distinct from ...

phphtmlmysqlsql

Utilize React Material UI Slider to dynamically adjust Border Radius in your web design

Utilizing React Material UI's components like the slider and button is essential for this project. The main objective is to dynamically change the border radius of the button using the value obtained from the slider. However, there seems to be a chall ...

cssreactjsbuttonmaterial-uislider

I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

Apologies for the lengthy title. Here's the issue: I have a WordPress website with a custom theme and its corresponding child theme. Previously, updating the style.css file of the child theme would show the changes immediately after a website refresh ...

htmlcsswordpresscachingweb

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

Row within a table displaying link-like behavior

Here is the code I'm currently using: $('.table-striped tr').click( function() { var link = $(this).find('a').attr('href'); if(link != 'undefined') { window.location = link; } }).hover( func ...

javascripthtmlcsshyperlinkhtml-table

Embed video with a custom thumbnail in an iframe

Hello everyone! I'm a first-time user on stackoverflow seeking some help. Currently, I am using Dreamweaver to work with HTML and CSS in order to build a website. My task involves sourcing a video from a television archive and embedding it onto my si ...

htmlcssiframedreamweaver

Creating a personalized scrollball feature within a fancybox

Within my fancybox, I have a section with images that require a scroll bar. I currently have a scroll bar in place, but I am interested in implementing an anti-scroll (custom scrollbar) instead. I came across one option at https://github.com/Automattic/an ...

javascriptjqueryajaxfancybox

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions