Issue with custom checkbox not changing when bootstrap collapse occurs

I've been searching for a solution and experimenting with different methods, but I just can't seem to make it work.

Below is a CodePen example that showcases a custom checkbox with a toggle function to show/hide a div when checked, along with a regular checkbox that functions correctly.

I'm baffled as to why the custom checkbox doesn't change states when checked. When I remove the data-toggle attribute, the custom checkbox works fine, but once I reintroduce it, the functionality fails.

codepen.io/anon/pen/JzYOpZ

To clarify my issue, I want the checkbox to toggle between checked and unchecked states when clicked, while also displaying the collapsible div.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

In order to modify the appearance of the SVG, it is necessary to adjust the fill property using different classes. For the latest version, refer to the updated Pen at this link: https://codepen.io/anon/pen/pYjppK

The specific changes made in the CSS are outlined below:

.cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.cbx span:first-child svg {
  fill: blue;
}

.cbx.collapsed span:first-child svg {
  fill: none;
}

Additionally, to set the checkbox as collapsed upon loading, the 'collapsed' class was added to the checkbox as shown below:

<label class="cbx collapsed" for="test" data-toggle="collapse" href="#collapseOne">

Answer №2

If you're not actively avoiding JavaScript, a straightforward fix is to create a function that alters the state:

Modify the HTML:

<div class="checkbox" onclick="toggleCheckbox()">

JavaScript Function:

function toggleCheckbox()
{
  if (document.getElementById("test").checked == false)
    {
      document.getElementById("test").checked = true;
    }
  else
    {
      document.getElementById("test").checked = false;
    } 
}

Note: Remember to include the script file link if you go with this solution:

<script type="text/javascript" src="yourScript.js"></script>

Answer №3

Wow, the solution to this problem turned out to be surprisingly straightforward

Instead of relying on the href attribute to collapse the desired div, it's important to use "data-target"

I've made the necessary adjustments to the codepen in the query to showcase this change.

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

Crop and resize a portion of an image using CSS

Is there a way to display just part of an image on a webpage and scale that specific area either larger or smaller using CSS? A common method is by using the following code: $("#myDiv").css({ width: 100, height: 100, background: "url('myurl.jpg ...

htmlcssimage-scalingimage-extraction

Checking Ember.js - How to retrieve the status of each checkbox individually

I am currently working on an older version (1.11) of an Ember app and I have multiple checkboxes generated within a loop. I am looking to determine whether an element has been checked or unchecked in an action. Ember ehbs: {{#each item in data}} <lab ...

javascripthtmlember.jscheckbox

Issue: Node.js Express unable to access static files when the route is nested more than one folder level deep.Resolution

Before we delve into the question, let me share with you the folder structure of my node.js express app: /home server.js index.html /app /routes public.js /public /css main.css In my server.js file, ...

javascriptcssnode.jsexpress

Converting a 'div' element into a dropdown menu with CSS and Jquery

I am facing a challenge where I have a collection of buttons enclosed in a div that I want to resemble a dropdown: <div id = "group"> <label> Group: </ label> <div value =" 1hour "> 1h < / div> <div value =" 2hou ...

javascriptjquerycss

Displaying elements side by side on larger screens and centered on smaller screens

Is there a way to arrange elements next to each other on wider screens, aligning them left and right, while also centering one above the other on narrower screens? Preferably without using media queries: ...

cssbootstrap-4

Achieving the display of font-weight 100 for Google web fonts successful

I have been experiencing difficulties in achieving the ultra-thin display of the Lato font through Google web fonts. Despite appearing correctly on Google's website, the font weight does not change when implemented on my own page if it is below 400 (I ...

csswebfontsgoogle-webfonts

Why isn't Latex rendering when called from Javascript?

Below is the code I'm working with: function test() { document.getElementById('demo').innerHTML="$$\left[ x=0 \right] $$";//same code from demo1.but not rendered } test(); <script type="text/javascript" src="http://latex.co ...

javascripthtmllatexrenderingtex

Can you create different width sizes using two types in HTML?

As I delve into learning HTML, I find myself curious about the possibility of combining multiple size types for width. For instance, is it possible to set a width that is both 10px and 3vw? While I understand that this isn't directly supported, I wond ...

htmlcsswebwidth

What is the best way to present the new segment?

Having trouble with creating new sections or content after the homepage? The issue is that the new content doesn't appear on a new page but rather on the homepage itself. An example of this problem can be seen on this CodePen project, where an h1 sect ...

htmlcssbootstrap-4bootstrap-5

Display fixed information in a separate tab using express and ejs

I have an Express app that is running smoothly with a MongoDB backend, and it's able to render tables with data flawlessly. However, I've encountered an issue when trying to export a table from my database. The exported table looks something like ...

javascriptjqueryhtmlnode.jsexpress

How can I use JavaScript api calls to retrieve an image url and insert it into an image tag in an

I have a JSON object that I need to use to retrieve images from a remote URL and display them in the img tag using API calls. The API link can be found at <div class="emoji"> <ul id="emojiz"></ul> <span style= ...

javascriptajaxhtmlapi

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

Checkboxes with dynamic functionalities are not being submitted in the form

I'm struggling with a div element that dynamically populates a list of checkboxes based on a selection from a drop-down list. Although the checkboxes are being populated correctly, the 'pl' parameter is not being successfully passed to the o ...

phpjqueryhtmlsqlforms

Exploring CSS Images, Graphics, and Typography in the Laravel 4 Framework

I am encountering some difficulties with setting up my assets in the Laravel 4 Framework. To provide some context, I have an assets folder within my public directory, containing subfolders for css, images, and fonts. Here are the paths: /laravel-master/pu ...

csslaravellaravel-4

How to save HTML content in a variable for future use in Next.js

When working with Next JS, my code resembles something like this: function Test() { return ( <section> <div>Test</div> </section> ); } Now, imagine that I want to have multiple entries here, gen ...

javascripthtmlnext.js

The libmagic library detects the MIME type of files as text/plain rather than text/javascript or

In my web project's interface, I am using libmagic to retrieve the MIME type of a file. Interestingly, I am encountering issues where css and js files are being identified as text/plain MIME type. When using Chromium, the following warnings are displ ...

javascriptcssclibmagic

When conditions are met, all items are added to the array

In my Angular app, I have a user list that I am trying to filter based on the condition age > 45. However, all users are being pushed into the validForScheme array instead of just those meeting the condition. I am unable to figure out what is going wron ...

javascripthtmlangularjsarrays

Video with a personalized play button overlay

I'm currently facing an issue with adding text above a GIF on a video play button specifically for mobile devices. The custom play button is necessary because no mobile device supports video autoplay. I've tried various methods to display the tex ...

htmlcssvideotext

A Guide on Modifying a Pseudo Element When Clicked

How can I create a click handler in jQuery to change the color of an 'eyebrow' element above a Heading element? The eyebrow element is set up with a pseudo element in my project, and I'm struggling to make it change color when the heading is ...

jquerycsspseudo-element

What is the best way to align this list horizontally with evenly distributed widths?

I am struggling to figure out how to turn this into a horizontal list where all the elements have equal width. If there is any missing information, please let me know by commenting or messaging. All the CSS that is not within the "grid" <li> is for ...

htmlcss