Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch.

$('.tog').on('click', function() {
  $('.cntr').show();
});
.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;  
// Rest of the CSS code here...   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tog">
  <label class="switch">
        <input type="checkbox" id="togBtn">
        <div class="slider round">
            <!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END-->
        </div>
    </label>
</div>
<div class="cntr">Donec sollicitudin molestie malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa, convallis
  a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque
  nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</div>

Answer №1

Functional CodePen Link.

The reason for the issue is how the click event is being attached, it should be attached to the nested span element:

$('.slider span').on('click', function() {
  $('.cntr').toggle(); 
});

Code Snippet:

$('.slider span').on('click', function() {
  $('.cntr').toggle();
});
.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

/* CSS continues... */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tog">
  <label class="switch">
        <input type="checkbox" id="togBtn">
        <div class="slider round">
            <!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END-->
        </div>
    </label>
</div>
<div class="cntr">Additional content here.</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

What is the process for collapsing Kendo Grid headers?

My current task is rather unusual. I have been tasked with collapsing all data rows of a Kendo grid to its header. While I am familiar with collapsing to groups, this particular requirement seems quite challenging. Below is the proposed design for the Ken ...

Tips for saving information in a JSON structure

I have a dataset structured as follows: Unique ID (int) | First Name (string) | Last Name (string) | Pct (double) An example of the data set might be: 1 | John | Hancock | 49.5 2 | John | Hancock | 95.0 3 | Jane | Hancock | 89.5 4 | Jane | Hanc ...

The Art of Repeating: Navigating through a Multi-Layered Array

My PHP Array looks like this: $fruits = array( array("Apple", 1.25), array("Banana", 0.86), ); Desired HTML Output: I want the HTML output to be formatted as follows: Fruit: Apple Price: 1.25 Fruit: Banana Price: 0.86 Attempts Made: I tried ...

How can I temporarily turn off the animation on a directive in Angular JS to prevent it from animating during page load?

Check out this JSFiddle for the issue: http://jsfiddle.net/goodwill/ezNuj/ I have created a custom directive with the code below: myApp.directive('ngFadeIn', function() { return function(scope, element, attr) { if (element.is('tr, t ...

Styling text using SVG in HTML

I'm trying to underline a text element in SVG using the text-decoration attribute, but I'm running into an issue with the color of the line not changing. Here is the code snippet I am working with: <svg id="svg" viewBox="0 0 300 ...

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

What are the steps to customize the appearance of a ComboBox using CSS?

I'm struggling to style the items in a combo box when it's dropped down. Currently using vaadin-time-picker on Svelte, but my issue persists due to the combo box included. Despite experimenting with CSS, I haven't had any success. My goal i ...

Is it possible to refresh only a specific table on a Razor site without reloading the entire page?

Greetings! I am currently working on a table and facing an issue. Currently, I am unable to update the table without the website refreshing. I require a solution that will allow me to easily Add, Delete, or Modify rows in the table's content. This ...

Is it possible to transfer data between the beforeSend and success functions within the jQuery .ajax method?

The Issue When utilizing AJAX to request data from a remote API, the asynchronous nature of the request means that responses come back whenever they are ready. The challenge arises when making multiple calls to the same API with different parameters, as i ...

The flexbox layout is not properly stacking div rows in a column

Objective: Creating a flexbox layout with a responsive background image that adjusts in height when the screen size changes, causing elements to wrap; In addition, there is a fixed header bar at the top of the page. The layout consists of a full-screen co ...

Choose a selection from the options provided

This is a sample for demonstration purposes. I am trying to display an alert with the message "HI" when I click on Reports using the id main_menu_reports. My attempted solution is shown below. <ul class="nav" id='main_root_menu'> & ...

Using JavaScript/jQuery to tally characters

Here is the code snippet that I am currently working with: PHP <input style="color:red;font-size:12pt;font-style:italic;" readonly="" type="text" name="q22length" size="3" maxlength="3" value="50"/> <textarea onkeydown="textCounter(doc ...

How to turn off pinch to zoom feature in Mozilla Firefox on a Microsoft tablet or touch screen display

My goal is to enable zooming and panning for an SVG across all devices and browsers. I've successfully implemented this using panzoom.js. However, I'm encountering an issue specifically with Mozilla Firefox on tablet devices and Windows touch sc ...

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

Stylish Tabbed Design

Imagine I have this html and css snippet h1{ color: rgb(61, 133, 200); font-size: 3em; margin-left: 0px !important; } h1 ~ *:not(h1) { margin-left: 0px; } h2{ font-size: 1.8em; margin-left: 40px !important; } h2 ~ *:not(h2) { ...

The external hyperlink is not functional in Firefox and Chrome browsers, but it operates properly in Internet Explorer 9

For security reasons, it seems that embedding an external link for live scoring from itftennis.com on our website is blocked. If you try to click on the jsfiddle LIVE SCORING link, it will open a page with an error. However, if you click on the address ba ...

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button: <script> $('input[type="button"]').on('touchstart', func ...

Custom view with spannable text functionality

Can a custom view be included in a spannable text? I've noticed various types of spannable objects in the android.text.style package, but I'm curious if it's possible to insert a custom view. Something like spanable.setSpan(CustomView, .. ...

The publicPath configuration in Webpack is not functioning as expected

Check out my demo setup: Take a look at my webpack configuration below: module.exports = { entry: './app.js', output: { filename: 'bundle.js', path: './build', publicPath: 'http://localhost:3000/&apos ...