I currently have some code for a toggle button and a collapse feature, but I'm struggling to integrate the two

I need assistance with implementing a toggle animation I found here: https://codepen.io/7harrypotterrr/pen/OrBwPY. I'm unsure how to apply it to my code and replace the current toggle button that is in use here: https://codepen.io/7harrypotterrr/pen/ebPKjZ

.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 5px;
}

.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}

.toggle-box:checked + label + div {
  display: block;
}

.toggle-box + label:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked + label:before {
  content: "\2212";
}

.checkbox:hover {
    color: #0da1ec !important;
}

label:hover {
  color: pink;
}
<div id="page">

  <input class="toggle-box" id="identifier-1" type="checkbox">
  <label for="identifier-1">test</label>
  <div>test</div>
  <input class="toggle-box" id="identifier-2" type="checkbox">
  <label for="identifier-2">test</label>
  <div>test</div>
</div>

Any guidance on this matter would be greatly appreciated. Thank you in advance!

htmlcss

Answer №1

You should disregard your current CSS and implement the CSS provided in the first CodePen to achieve the desired styling.

Additionally, remember to eliminate the div after each label and substitute 'test' with <i></i>.

label {
  display: block;
  width: 54px;
  height: 32px;
  margin: 0px auto;
  border-radius: 100px;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  background-color: #E6E9EC;
}

input {
  display: none;
}


/* The toggle */

i {
  height: 28px;
  width: 28px;
  background: #ffffff;
  display: inline-block;
  border-radius: 100px;
  margin-top: 2px;
  margin-left: 2px;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  pointer-events: none;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

label:hover>i {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
  transform: scale(1.01);
}

input:checked+label>i {
  margin-left: 24px;
}

label:active {
  background-color: #A6B9CB;
}

label:active>i {
  width: 34px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}

input:checked+label:active>i {
  margin-left: 18px;
}

input:checked+label {
  background-color: #008FFF;
}
<div id="page">

<input class="toggle-box" id="identifier-1" type="checkbox">
<label for="identifier-1"><i></i></label>

<input class="toggle-box" id="identifier-2" type="checkbox">
<label for="identifier-2"><i></i></label>

</div>

Answer №2

To achieve the desired outcome, you can use the following CSS code in conjunction with structuring your HTML according to the provided snippet.

.toggly + label + div {
  display: none;
  margin-bottom: 10px;
}

.toggly:checked + label + div {
  display: block;
}


label {
  display: block;
  width: 54px;
  height: 32px;
  margin: 0px auto;
  border-radius: 100px;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  background-color: #E6E9EC;
}

input {
  display: none;
}


/* The toggle */

i {
  height: 28px;
  width: 28px;
  background: #ffffff;
  display: inline-block;
  border-radius: 100px;
  margin-top: 2px;
  margin-left: 2px;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  pointer-events: none;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

label:hover>i {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
  transform: scale(1.01);
}

input:checked+label>i {
  margin-left: 24px;
}

label:active {
  background-color: #A6B9CB;
}

label:active>i {
  width: 34px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}

input:checked+label:active>i {
  margin-left: 18px;
}

input:checked+label {
  background-color: #008FFF;
}



.toggly + label + div {
  display: none;
  margin-bottom: 10px;
}

.toggly:checked + label + div {
  display: block;
}
<input type="checkbox" id="toggly" class="toggly">
  <label for="toggly"><i></i></label>
<div>Test</test>

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

Solving the problem of endless looping in JavaScript tree structures

i have been trying to create a tree structure in JavaScript. However, when I use the add_child function to add a child to an item in the elements array, it adds the child to all items in the elements array and their children, creating an infinite loop. I ...

javascripthtmlcss

Position an iframe in alignment

I'm working on a HTML page and I have been trying to figure out how to align an iframe at the bottom of the page so that it spans the entire width. Despite my efforts, I haven't been successful in getting the iframe to align properly at the botto ...

htmlcssiframe

The integration between React hook form and reactstrap input components is not functioning properly

Having an issue with react-hook-form and reactstrap. The component List.jsx is causing trouble: import { useContext, useEffect } from "react"; import { ListContext, ADD_LIST } from '../providers/ShoppingListProvider'; import { Link } from "react- ...

javascripthtmlreactjsreact-hook-formreactstrap

What is the best way to stop a jQuery event listener on a button within a form from triggering upon the user hitting the Enter key?

Here is an example of a form containing a button: <form> <input type="text"> <button>Click Me</button> <input type="submit" value="Submit"/> </form> Using the following JavaScript: $('form').subm ...

jqueryhtmlformsbuttonform-submit

Close the overlay by clicking outside of it

I'm working on creating a unique pop-up window that appears when a customer adds a product to their cart. The design features red and green background divs with a darker overlay (#overlay-daddy) and a white child div (#overlay). My issue arises from ...

javascripthtmlcss

Do arrays permanently retain the strings stored within them?

As an 11-year-old who has been learning Javascript for the past month and a half, I am currently working on creating a login/register system. Right now, my focus is on the register part. I have a question: when adding a string/number/boolean to an array, d ...

javascripthtmljquerycssarrays

Coldfusion: The Troubles of an Empty Link href="#" Error

For my CFWheels Coldfusion project, I have been utilizing Adobe Coldfusion Builder 3. In Coldfusion, when you want to output a variable, you typically do something like this: #variable_name# However, I am interested in incorporating an empty link into m ...

javascripthtmlcoldfusionescaping

What causes variations in the output of getClientRects() for identical code snippets?

Here is the code snippet provided. If you click on "Run code snippet" button, you will see the output: 1 - p.getClientRects().length 2 - span.getClientRects().length However, if you expand the snippet first and then run it, you will notice a slight dif ...

javascripthtmlcss

Struggling with css margins and div image constraints, seeking guidance and tips for resolution

Struggling with creating a dynamic gallery that works smoothly in jsfiddle but encounters multiple issues when integrated into WordPress. The main problem is the excessive stretching of margins between image titles and meta-data, leading to misalignment an ...

javascriptjqueryhtmlcssmargins

Struggling to showcase array data in a visually appealing table format?

Hello, I am currently facing the following issue Here is a snapshot of my current website; https://i.sstatic.net/pNXNx.png I am trying to display content in a table from an array stored in a JSON file. Initially, I used a foreach loop which worked perfe ...

phphtmlarraysjsonkey

Transport the unique identifier of the table row

After retrieving the list of followers from Instagram and storing it in an array in a session, I am displaying the data in a tabular format. <table class="tablesorter" cellspacing="0"> <thead> <tr> <th>&l ...

javascriptphpjqueryhtmlajax

Resolved issue with maintaining scroll position after adjustments to scroll height

Currently, I am in the process of creating a chatroom that includes pagination. The issue I am encountering is related to loading old messages when the scroll height reaches 0. However, unlike platforms such as Facebook and Slack, even when the scroll he ...

javascripthtmlcssreactjsnext.js

What is causing the body to be partially hidden on the right side of every mobile device screen?

I'm currently addressing the mobile optimization issues on a website that I've been developing for some time, and I've encountered my first obstacle. When viewing it on an iPad, the body of the site doesn't extend all the way to the rig ...

htmlcssipadmobile

Error 404: The requested file could not be located on the MAMP server

Whenever I try to access a PHP file on MAMP, I keep getting a 404 error message. The error reads: "The requested URL /‘welcome.php’ was not found on this server." Oddly enough, both the HTML and PHP files work perfectly fine when accessed via localho ...

phphtmlformshttp-status-code-404mamp

Revamping Slideshows: Bringing CSS Animation to JavaScript

/* JavaScript */ var slides=0; var array=new Array('background.jpg','banner.jpg','image.jpg'); var length=array.length-1; $(document).ready( function(){ setInterval(function(){ slides++; ...

javascripthtmlcss

Transfer an HTML file generated in real-time to an external server using SFTP

I am currently working on creating an HTML file dynamically using the file_put_contents function and the ssh2 library for SFTP. However, I am facing an issue where Apache is reporting that the file cannot be sent because it does not exist on the local dis ...

phphtmlftpsftp

Error arises when uploading csv files to Node.js with Multer due to an unexpected field presence

I'm currently working on implementing a file upload feature with the use of Node.js, Vue, and Multer. Below is the Vue.js front-end code: export default { data(){ return{ selected: "How do you want to input the data?", options: [ ...

javascripthtmlnode.jsvue.jsmulter

Continuous animation for a sequence of overlapping images with smooth transitions

Currently, I am in the process of developing a JavaScript script that will cycle through a series of images within the same <div>. The goal is to create a seamless animation effect with the image transitions. Although the images are cycling through, ...

javascripthtmlcssanimationcss-transitions

Looking to set the "min" attribute for an input type="date" in HTML5 with a specific date format preselected?

My upcoming date has a specific format as detailed below. Date_received = Tue Apr 05 2016 00:00:00 GMT+0530 (India Standard Time) To set the 'min' attribute for the HTML5 input type="date" datepicker, I need to initialize it using the following ...

javascriptjqueryangularjshtml

Fixed and percentage widths in horizontal divs for children, with the percentage width exceeding the desired size

Here's the code snippet I'm working with: http://pastebin.com/W3ggtgZB. The body of this code can be found here: http://pastebin.com/2tkmhnfW. My goal is to create a div containing two child divs. One child div should have a fixed width, while t ...

htmlsizewidthpercentagechildren