Instructions for displaying a div when a checkbox is selected

Looking for help with PSD to Bootstrap 4.5 conversion.

https://i.sstatic.net/TOXkK.png

I have a layout that needs to function like the accordion example at https://getbootstrap.com/docs/4.5/components/collapse/#multiple-targets.

Referencing this demo:

https://i.sstatic.net/nHlAx.png

Accordion functionality is key in this implementation. Need assistance converting from PSD to Bootstrap 4.5

<div class="container-fluid">
    <b>Job request</b>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="change_jobs">Intend to select or change job</label>
                <input type="checkbox" id="change_jobs" name="change_jobs" data-toggle="collapse" data-target="#change_jobs" role="button" aria-expanded="false" aria-controls="change_jobs">
                <div class="collapse" id="change_jobs">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="job_group">Job Group</label>
                                <select id="job_group" name="job_group">
                                    @foreach ($job_groups as $job_group)
                                        <option value="{{ $job_group->id }}">{{ $job_group->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="how_cooperate">How to cooperate</label>
                                <select id="how_cooperate" name="how_cooperate">
                                    @foreach ($how_cooperates as $how_cooperate)
                                        <option value="{{ $how_cooperate->id }}">{{ $how_cooperate->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Seeking guidance on troubleshooting the implementation.

Appreciate any input!

Answer №1

To implement a toggle effect in your webpage, utilize the jQuery function .slide(). Create an event listener for when a checkbox is checked, and specify the div or element you wish to toggle between hide and show.

$(document).ready(function(){
$('input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
              $( "p" ).slideDown( "slow", function() {
                // Animation complete.
              });
        }
        else{
              $( "p" ).slideUp( "slow", function() {
                // Animation complete.
              });
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="display:none;">Watch me come and go.</p>

<input type="checkbox">Toggle

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

Having trouble with router.push in Vue3 and Vuex4?

Encountering some issues with Vue 3 and Vuex. Attempting to redirect users when logged in within my Vuex file, but the redirection is not happening as expected. No errors are being returned, only a link change without actually redirecting to another page. ...

Should classes/interfaces/functions be consistently prefixed with the App acronym as a best practice?

As I delve into my Angular project, I find myself contemplating the idea of using the App acronym as a prefix for all Classes, Interfaces, and Functions. This practice is commonly seen in tag components, where adding the App acronym helps avoid conflicts i ...

Using the $.ajax() method can sometimes lead to encountering the error message "Uncaught ReferenceError: data is not defined"

I experimented with different methods to retrieve .json files and data using $.getJSON and $.ajax() here The issue I encountered with my JS code number 2 is: $.ajax({ type: "GET", url: 'js/main.js', data: data, success: 1, }).done(fun ...

Locating a Guild Member using their Alias

I need help locating a GuildMember using their nickname. The nickname is linked to their Roblox name upon joining the server, and I've configured a webhook to transmit a message in a specific channel containing their username and other related details ...

sending an object between JavaScript and PHP and vice versa

This task seems quite challenging and not easily achievable. Imagine having a button inside a div in HTML. When you click the button, you call a PHP function using AJAX. The goal is to send the element that triggered the click event (or any other element ...

Button placed within a jade table cell

I'm struggling to make a button appear in each row of the table. I am new to working with Jade and Node.js, so I can't seem to figure out why it's not showing up. Here is my Jade file: html head body table.table.table(border='1 ...

JavaScript encountered an abrupt cessation of input, catching us off guard

Can someone please help me identify the issue with the JavaScript code below? I encountered an error message stating "Unexpected end of input", but upon reviewing the code, I couldn't find any apparent errors. All my statements seem to be properly ter ...

JavaScript getter function is returning undefined even though it functions properly during the initial invocation

After successfully using a getter in pug the first time, it later returns undefined even though the code remains consistent. What could be causing this issue? The Question object class and its associated getter: class Question { constructor(op, min, ma ...

Is it possible to display a combination of images and text data using JQUERY/AJAX, when the data is sent as objects or arrays?

I'm struggling to figure out how to handle an object or array sent from a server that contains binary picture and text data using JQUERY/AJAX Here is the server-side setup: const url= require('url'), express = require('express&ap ...

Leveraging JavaScript functions within an HTML file on an Android device

Currently, I am facing an issue with loading and playing videos via streaming in my Android app using a JavaScript code inside an HTML file. My approach involves using a WebView to showcase the video content. However, the challenge lies in the fact that th ...

What causes the variance in outcomes between employing a literal string versus a local variable?

Here is a loop that I am working with: for (var key in criteria) { var exists = Object.keys(item).some(function(k) { return item[k] === "Test"; }) } Initially, this loop functions as expected and returns 15 trues based on the number of i ...

Create a selection list with Bootstrap that has a transparent background

Can you create a standard selection list with a transparent background? Below are two examples. While it's possible to create a "custom" selection list with a transparent background, is it possible to achieve the same effect using a select element? H ...

Storing and retrieving form content in local storage with AngularJS

Is there a way for the data in the scope to be returned to the textbox value upon refreshing the page, using only an update button? Here's an example: Plunker ...

Using Node.js (Express) to import a JSON file from a URL

As someone new to node.js, I am attempting to retrieve a json file from a specific url (e.g. 'http://www.example.com/sample_data.json'). My objective is to fetch the file just once when the server initializes and then store it locally on the cli ...

Eliminate repeated elements in a selection using an AngularJS custom directive

I am in the process of creating an events app that utilizes JSON data from Drupal to showcase events using AngularJS within a Drupal module. One of the keys in the JSON object is 'genre', which I'm utilizing in a select dropdown to allow use ...

The button in my form, created using React, continuously causes the page to refresh

I tried to create a chat application using node.js and react.js. However, I'm facing an issue where clicking the button on my page refreshes the entire page. As a beginner in web development, please forgive me if this is an obvious problem. You can fi ...

Color scheme for navigation bar carousel item background color

I have a navigation bar and carousel within the same section. I want to change the background color of both the navigation bar and carousel item when the carousel indicator becomes active. Any suggestions on how to achieve this using a jQuery function? H ...

Converting PHP code to JavaScript and extracting <script> tags into HTML

Currently, I am working on a small game where I transfer essential game data to the client by constructing the data and inserting it into the HTML as shown below: <?php echo "<script>"; echo "window.gd = ".json_encode($manager->game, ...

Create-react-app unable to activate Service Worker

I've been utilizing the power of create-react-app to create my react.js project. Whenever I use the command npm run build, it automatically integrates a service-worker for progressive web app functionality in the production build. Everything was runn ...

The particle system in three.js is stationary and unable to move

After delving into a Chinese book on WebGL, I decided to test out the particle system example in Firefox. However, I encountered an issue where my particles were not moving as expected. I have uploaded my source code and resources to the following website ...