"Conceal the DIV only when neither of the switches are turned on

Is there a way to hide a paragraph only when two collapsible switch buttons are turned off in my Bootstrap frontend form? I have two checkboxes with corresponding switches, and the paragraph should only be hidden when both switches are off, but I'm not sure how to achieve this.

<label class="switch mt-2">
<input class="form-check-input" type="checkbox" role="switch" id="ds-activate" data-bs-toggle='collapse' data-bs-target='#dsForm' aria-expanded="false" aria-controls="dsForm" checked>
<div class="slider round">
</div>
</label>

<label class="switch mt-2">
<input class="fo rm-check-input" type="checkbox" role="switch" id="email-activate" data-bs-toggle='collapse' data-bs-target='#emailForm' aria-expanded="false">
<div class="slider round">
</div>
</label>

<div id="hideWhenBothSwitchOff" aria-expanded="false" class="collapse show">
  <label class="form-label">MORE OPTIONSs</label>
  <p>Explanation of the next options.</p>
</div>

<div id="dsForm" aria-expanded="false" class="collapse show">
  <div class="form-check mt-2 mb-2">
    <input class="form-check-input" type="checkbox" value="" id="all-documents">
    <label class="form-check-label" for="allDocuments">
      Checkbox 1 label
    </label>
  </div>
</div>

<div id="emailForm" aria-expanded="false" class="collapse">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="all-emails">
    <label class="form-check-label" for="allEmails">
      Checkbox 2 label
    </label>
  </div>
</div>
htmljquerycsstwitter-bootstrap

Answer №1

To achieve your goal, we can utilize a bit of JavaScript with the help of Bootstrap's Collapse component.

// Let's create a collapsible feature for the element that needs to be shown or hidden based on two checkboxes.
const collapsible = new bootstrap.Collapse('#hideWhenBothSwitchOff', {
  toggle: false,
});

// These are the checkboxes we need to monitor.
const checkboxes = [
  document.getElementById('ds-activate'),
  document.getElementById('email-activate'),
];

// We'll add event listeners to each checkbox to track their changes (checked or unchecked).
checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', () => {
    // If any of the checkboxes is checked, display the collapsible element, otherwise hide it.
    const operation = checkboxes.some(({ checked }) => checked)
      ? 'show'
      : 'hide';
    collapsible[operation]();
  });
});
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011d011f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06646969727572746776463328342836">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<label class="switch mt-2">
<input class="form-check-input" type="checkbox" role="switch" id="ds-activate" data-bs-toggle='collapse' data-bs-target='#dsForm' aria-expanded="false" aria-controls="dsForm" checked>
<div class="slider round">
</div>
</label>

<label class="switch mt-2">
<input class="fo rm-check-input" type="checkbox" role="switch" id="email-activate" data-bs-toggle='collapse' data-bs-target='#emailForm' aria-expanded="false">
<div class="slider round">
</div>
</label>

<div id="hideWhenBothSwitchOff" aria-expanded="false" class="collapse show">
  <label class="form-label">MORE OPTIONSs</label>
  <p>Explanation of the next options.</p>
</div>

<div id="dsForm" aria-expanded="false" class="collapse show">
  <div class="form-check mt-2 mb-2">
    <input class="form-check-input" type="checkbox" value="" id="all-documents">
    <label class="form-check-label" for="allDocuments">
      Checkbox 1 label
    </label>
  </div>
</div>

<div id="emailForm" aria-expanded="false" class="collapse">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="all-emails">
    <label class="form-check-label" for="allEmails">
      Checkbox 2 label
    </label>
  </div>
</div>

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

Can you explain the compatibility between comet and PHP?

As I utilize Comet iframe, I simply send script tags from the backend PHP file to the frontend where JavaScript displays them. I would appreciate it if someone could provide a concise explanation of how the comet server fits into the equation and how comm ...

javascriptjqueryajaxcomet

Vue Filtering and Pagination Implementation

In Vue pagination, how can you control the number of array objects to be displayed based on a user-selected amount like 10, 15, or 25? I successfully implemented rendering 10 items per page and it's functioning smoothly. ...

javascripthtmlvue.jshtml-tableaxios

Relative fluid icon within the parent element

Looking at my JSFiddle example, I have two buttons with icons that currently have fixed width and height set. How can I make these icon sizes relative to the parent element using percentages, such as 80%? Current fixed width and height of icons: .gc_foot ...

css

When a table undergoes a dynamic reload, the formatting for the columns fails to display properly

After fetching image metadata from an API call, a table is dynamically generated on page load. Subsequently, when new images are uploaded, the function responsible for building the table is called again to include this new data. However, despite the CSS st ...

jqueryhtmlcssajaxhtml-table

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...

javascriptcssreactjsmaterial-uimakestyles

JavaScript preloader function isn't functioning properly when paired with a button

I'm currently working on developing a preliminary landing page for my game using JavaScript. I have integrated a class that overlays my main content, and added an 'onclick' function named fadeOut() for my button in JavaScript. However, the f ...

javascripthtmlcss

organizing arrays with the structure name:url

I have a list of string URLs like "http://dom/image1.jpg","http://dom/image2.jpg" that I obtained from an API which returns only the links. However, the plugin I am using requires the array to be in a specific format: {image:"http://dom/image1.jpg"},{imag ...

javascriptjquery

Discovering similarities among array elements by looping through an array

Two sets of arrays have values obtained using the data-attribute(data-product-name). One set contains the full list of available items, while the other set consists of selected items associated with a country. <!-- the item list --> <div ...

javascriptjqueryarraysstring-matching

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

After setting up an $.ajax() function and ensuring the data binding is correctly configured, I expected the data to append to a table on page load without any issues. However, the data is not appearing as expected. Is there something that I might be overlo ...

javascriptjqueryhtmlajax

Using JQuery to delete data from a cookie

I have a delicious cookie that I want to savor before removing one element from it based on the widget ID. if (thisWidgetSettings.removable) { $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) { ...

javascriptjquerycookies

Can you explain the process of utilizing CSS to create a smooth transition effect with

In the example application, I am utilizing the following plugin: I am perplexed by this line of code: style="width: 538px; transition: opacity 10000ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s;. Can someone explain how the transition works? From what ...

javascripthtmljquerycss

Unable to display image on HTML due to the image src not loading

Hey folks! I'm currently working on a TodoApp using react js, and although I have a basic layout set up, I am encountering an issue while trying to add images to the app. Unfortunately, the images are not loading as expected. Sharing the relevant cod ...

htmlreactjsweb

Extracting Values from a jQuery Array Object

Good day everyone! Here is the code I am currently working with: var items = []; $(xml).find("Placemark").each(function () { var tmp_latLng = $(this).find("coordinates").text(); tmp_latLng = tmp_latLng.split(","); items.push({ name: ...

javascriptjqueryarraysxmlparsing

It is impossible for 4 div elements to align in a horizontal position

Having an issue where I am trying to align 4 boxes horizontally like cards, but they are appearing in a staircase formation instead. Any help would be appreciated. I have provided the code with the issue on this jsfiddle link #first { ...

htmlcssflexbox

Basics of CSS border-image explained

Although it seems simple, I'm struggling to figure out what the issue might be. I am attempting to create a div with a specific border on an ASP.Net webpage. CSS: .ResourcesDiv { border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-w ...

htmlcssborder

Steps to Activate Quill Editor on the Document Object Model (DOM) Post Cloning

I've created a rather intricate page layout where users can add blocks dynamically to the dom. Each block contains a Quill editor, which is functioning correctly. However, I'm facing an issue when trying to edit the content once it's been co ...

jqueryquill

Error: Unable to retrieve current location using 'Geolocation' in React

import "./App.css"; import { useState, useEffect } from "react"; function App() { const [lat, setLat] = useState(null); const [long, setLong] = useState(null); const [data, setData] = useState(null); const [error, setError] = u ...

javascripthtmlreactjsnpmopenweathermap

Using pure CSS to style sibling span elements in a unique color

Looking to change the color of a specific span based on the title attribute of another span in a different div. The code below successfully turns text2 red if it has the title of "Red". span[title=Red] ~ span { color: red; } <span title="Red" ...

htmlcss

JavaScript to toggle the visibility of elements when they move outside of a specified container

Check out this js+html/css project I worked on: http://jsfiddle.net/A1ex5andr/xpRrf/ It functions as intended - opening and closing with the use of .advSearch-btn to open/close, and .advSearch-control .canc to close. However, I am facing an issue where it ...

javascriptjqueryhtmlcss

Checking for valid positive numbers and detecting invalid dates with Angular form techniques

How do I validate an input to ensure it is a positive number and a date no earlier than the current date using Angular's FormControl, FormBuilder, and FormGroup? Here is my code: HTML: <p>Enter price:</p> <input type="number" formCont ...

htmlangularformsvalidationangular-reactive-forms