Ways to show various div elements when a checkbox is clicked

My goal is to have the div element show when I click on the checkbox and hide when I uncheck it. The code below works fine in terms of functionality.

However, the issue arises when I click on both checkbox1 and checkbox2, causing the div element to override the display.

Below is the code that I am working with:

I am expecting the result to look like this image: https://ibb.co/SXkTp6m

Any help would be greatly appreciated.

function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/ >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>

<div class="container">
  <div class="row" style="display:none;" id="lundi">Some content1</div>
  <div class="row" style="display:none;" id="mardi">Some content2</div>
  <div class="row" style="display:none;" id="mercredi">Some content3</div>
  <div class="row" style="display:none;" id="jeudi">Some content4</div>
  <div class="row" style="display:none;" id="vendredi">Some content5</div>
  <div class="row" style="display:none;" id="samedi">Some content6</div>
  <div class="row" style="display:none;" id="dimanche">Some content6</div>
</div>

javascripthtmljquerycssbootstrap-4

Answer №1

function toggleDayVisibility(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input class="mr-1" type="checkbox" value="monday" id="mondayCheck" onclick="toggleDayVisibility(this)" />1
  <input class="mr-1" type="checkbox" value="tuesday" id="tuesdayCheck" onclick="toggleDayVisibility(this)" />2
  <input class="mr-1" type="checkbox" value="wednesday" id="wednesdayCheck" onclick="toggleDayVisibility(this)" />3
  <input class="mr-1" type="checkbox" value="thursday" id="thursdayCheck" onclick="toggleDayVisibility(this)" />4
  <input class="mr-1" type="checkbox" value="friday" id="fridayCheck" onclick="toggleDayVisibility(this)" />5
  <input class="mr-1" type="checkbox" value="saturday" id="saturdayCheck" onclick="toggleDayVisibility(this)" />6
  <input class="mr-1" type="checkbox" value="sunday" id="sundayCheck" onclick="toggleDayVisibility(this)" />7
</div>

<div class="container">
  <div class="row mr-2 ml-0" style="display:none;" id="monday">Some content1</div>
  <div class="row mr-2 ml-0" style="display:none;" id="tuesday">Some content2</div>
  <div class="row mr-2 ml-0" style="display:none;" id="wednesday">Some content3</div>
  <div class="row mr-2 ml-0" style="display:none;" id="thursday">Some content4</div>
  <div class="row mr-2 ml-0" style="display:none;" id="friday">Some content5</div>
  <div class="row mr-2 ml-0" style="display:none;" id="saturday">Some content6</div>
  <div class="row mr-2 ml-0" style="display:none;" id="sunday">Some content6</div>
</div>
issue arises due to the row class having a margin of -15px

Answer №2

 function toggleDisplay(element) {
              document.getElementById(element.value).style.display = element.checked ? "initial" : "none";
            }
           
 .row{
            margin-right:20px !important
            }
       
<!DOCTYPE html>
<html>
    <head>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            
    </head>

<body>

<div class="container">
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="toggleDisplay(this)" />1
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="toggleDisplay(this)" />2
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="toggleDisplay(this)" />3
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="toggleDisplay(this)" />4
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="toggleDisplay(this)" />5
  <input type="checkbox" value="samedi" id="samediCheck" onclick="toggleDisplay(this)" />6
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="toggleDisplay(this)" />7
</div>

<div class="container">
  <div class="row" style="display:none;" id="lundi">Some content1</div>
  <div class="row" style="display:none;" id="mardi">Some content2</div>
  <div class="row" style="display:none;" id="mercredi">Some content3</div>
  <div class="row" style="display:none;" id="jeudi">Some content4</div>
  <div class="row" style="display:none;" id="vendredi">Some content5</div>
  <div class="row" style="display:none;" id="samedi">Some content6</div>
  <div class="row" style="display:none;" id="dimanche">Some content6</div>
</div>

</body>
</html>

You can set margin-right on text. See the demo by checking any checkbox.

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

Struggling to make the grunt.js task for postcss with autoprefixer function properly

I am currently facing issues with using postcss in conjunction with autoprefixer-core. Even though the css is being generated correctly, autoprefixer doesn't seem to be applying any prefixes. I have already installed postcss and autoprefixer via NPM ...

javascriptcssjsongruntjsautoprefixer

Achieving vertical center alignment in React Native: Tips and techniques

Just a quick heads-up: This question pertains to a school project. I'm currently knee-deep in a full-stack project that utilizes React Native for the front-end. I've hit a bit of a snag when it comes to page layout. Here's the snippet of my ...

javascriptreactjsreact-nativeweb-frontendreact-native-web

Alter the background of cards in real-time

I am unfamiliar with JavaScript, but I wish to utilize a function to alter the background color of multiple cards. function ChangeColorToGreen() { document.getElementById("ChangingCard").style.background = "green"; } function ChangeColorToPurple() { ...

javascripthtmlcssbootstrap-5

Increase the number of table rows as you scroll downwards

Hello everyone! I've been searching online for information on how to implement infinite scrolling in a table, but all I found were tutorials using divs. Can someone please provide guidance on how to achieve this? Perhaps a sample code snippet or tuto ...

javascriptphpajax

How can you decode JSON using JavaScript?

Need help with parsing a JSON string using JavaScript. The response looks like this: var data = '{"success":true,"number":2}'; Is there a way to extract the values success and number from this? ...

javascriptjsonparsing

Mistaken data retrieved from a knockout observable array

My current project involves developing a web application using Asp.Net Mvc, where I am utilizing knockout Js to retrieve and send data to the Html View after manipulating the data. For instance, let's consider the data in an array called datainput: ...

javascripthtmlknockout.js

Time-driven occurrences in HTML

I want to create a daily event, like an alert box or a message displayed in a window, at 10 am on my webpage. How can I achieve this without constantly checking the time and wasting resources? ...

javascript

Using django-autocomplete-light to retrieve data

Hi everyone, I need some help with autocomplete-light. I am trying to display the 'add' button if the autocomplete returns nothing (Object does not exist yet). Where can I find the information about what autocomplete fetches from the back-end? H ...

jquerydjangodjango-autocomplete-light

Problem with starting the Node.js ./bin/www script at system boot

Currently, I am in the process of learning node.js. After successfully setting up Node and Express on my computer, I utilized the express auto project generator to create a basic project. Initially, everything was running smoothly as I could access my loca ...

javascriptnode.jsexpress

What's causing my React app's slideshow to malfunction?

Struggling with styling my React app after importing w3.css and attempting to create a slideshow with 3 images in the same directory as the component being rendered. As someone new to React and web development, I'm facing challenges in getting the des ...

javascriptcssreactjsw3-css

Modifying the HTML attribute value (of input) does not impact the value property

After inputting a single tag, I ran the following code in my Chrome console: https://i.stack.imgur.com/ySErA.jpg The result was unexpected for me. According to what I have read in a book, when I change an HTML attribute, the corresponding property should ...

javascripthtmlgoogle-chromeattributes

Is Vue substituting the "el" component instead of rendering within it?

Have you noticed that when creating a Vue instance, the element specified by "el" gets replaced instead of rendering inside of it? If I use an id to reference the "el", everything works fine. For example, new Vue({el: "div#app", render: h => h("span", ...

javascripthtmlvue.jsweb

arranged horizontally in a row html bootstrap

How can I place 2 horizontal cards next to each other? My current code overlaps the cards and creates a messy layout. I want the cards to be side by side like this: https://i.sstatic.net/s6225.png <div class="card-body p-0 d-flex justify-content-arou ...

htmlcssbootstrap-4

AngularJS and JQuery validated

I'm looking to achieve something similar to what was discussed in this thread: Angularjs directive wrapping ng-repeat Although I can make it work as shown in the thread, I encounter an issue when updating the dirs array using Angular (for example, w ...

jqueryangularjsdirective

Center two elements within a div container both horizontally and vertically

I am trying to vertically center a text and a button within a container. The text should be positioned in the middle of the div, while the button should be aligned to the right. What is the best way to achieve this layout where the text element is centere ...

htmlcss

What is the proper way to utilize the decodeURIComponent function?

router.get("/stocks/authed/:symbol", function (req, res, next) { req.db .from("stocks") .select("*") .modify(function(queryBuilder) { if (req.query.from && req.query.to) { queryBuilder.whereBetween('timestamp&apos ...

javascriptmysqlnode.jsexpressknex.js

Enabling direct access to sub-folder files within the root of npm imports

A new npm module I am creating has a specific folder structure: lib/ one-icon.jsx another-icon.jsx /* about 100 more */ package.json I would like to import these files in this manner: import OneIcon from 'icon-package/one-icon'; However ...

javascriptnode.jsnpm

Enhance your Select options using Ajax and Jquery by updating based on the value of another Select option

I'm struggling to understand how to dynamically update the options in a second select box based on the selection made in the first one. To achieve this, I am aiming to utilize a predetermined JSON object for the available choices in the second select ...

jqueryajaxjsonhtml-select

Invoking a function in an Angular 4 component using a <td> element

Take a look at this block of code: personListComponent.html <tr *ngFor="let person of personService.getPersons()"> <td (onShow)="getCountry(person)">{{person.name}}</td> <td>{{country}} </tr personListComponent.ts ...

htmlangulartypescript

Issues with displaying HTML video content

Seeking assistance with a unique coding predicament. I've got an HTML file that showcases a JavaScript-powered clock, but now I'm looking to enhance it by incorporating a looped video beneath the time display. Oddly enough, when the clock feature ...

javascriptcsshtmlhtml5-video