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

Leveraging Ajax and jQuery to create a POST request for adding a new record to a MySQL table within a Node.js server

My form is designed to collect user information like name, age, and more. The aim is to submit this data from the client side, inserting it into a MySQL table row. However, I'm facing difficulties in getting the data to successfully insert. Below are ...

Displacement occurs when the input tag is eliminated

After some trial and error, I have discovered that removing the input tag from the label causes a change in the layout height. I am puzzled as to why this is happening. Could there be a special reason for this height alignment issue when an input tag is pl ...

Can you retrieve the second value using JSON.stringify?

Currently implementing JSON.stringify(data.message) which returns the following value: [ { "code":"PasswordTooShort", "description":"Passwords must be at least 6 characters." } ] I aim to extract the description value for my alert message ...

No matter how hard I try, I can't seem to get any of my jQuery events to function properly on my

Help! I'm encountering issues with jQuery on my webpage. It's not functioning at all, despite my extensive search for a solution. Feeling desperate, I'm reaching out for assistance here. Below are my HTML and JS files: HTML <html> ...

Is it possible to move a directive within a limited parent element?

Is there a way to limit the movement of an angular.js drag directive within the confines of its parent element? You can see the problem I'm facing in this jsbin: http://jsbin.com/maxife/3/edit?html,css,js,output ...

EaseSlide 'Basic Slideshow' created by Ameenullah Fails to Function

I'm trying to embed a carousel into my webpage. I copied the code from Bootsnips but have been unable to solve this issue with other solutions. This is my HTML Code: <div class="container"> <div class="row> <div class="col ...

Conceal a list of items within a div that has a particular class

This is a sample of my HTML code: <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flut ...

Is there a way to eliminate the scrollbar from the purecss navbar?

My website utilizes pure.css and the navbar has more elements than can fit on a small screen without scrolling. This results in an unwanted scrollbar appearing. I want the navbar to remain at the top so that it scrolls along with the content. However, when ...

Is the script failing to retrieve the innerHTML content?

Here is a snippet of HTML code: <div id="team_players"> <h3>Players</h3> <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button> <table> <thead> <tr> ...

How can we convert unpredictable-length JSON user input into well-structured HTML code?

Welcome to the world of web development! I am currently embarking on a project where I aim to transform JSON data into HTML structures. Specifically, I am working on creating a dynamic menu for a restaurant that can be easily updated using a JSON file. The ...

Guide to rearranging the sequence of items in a selected jQuery collection

I have created a JavaScript filter that targets elements with the class .single: There are numerous divs with the class .single, each containing multiple text elements. The filter has already been set up to hide all .single elements that do not contain an ...

How can you enable fullscreen for a featherlight iFrame?

I have implemented Featherlight to display an iframe within a popup modal on my website. If you click the iframe button, you can see a demo of how it works. One issue I am facing is that the generated iframe tag by Featherlight does not include allowfulls ...

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

The method jqXHR.abort is not a valid function

I'm currently working on implementing a cancel button for jQuery file upload. Here is the code I have: var jqXHR = $('#fileupload').fileupload({ url: 'server/index.php', dataType: 'json', dropZone: $('#d ...

Having trouble with Simplehtmldom's innertext function?

While working with simple_html_dom: I encountered the following code snippet: $j = ' <itemBody> <div>films - to watch (Simple Present)<br/> <textEntryInteraction responseIdentifier="RESPONSE_1"/> ...

Utilizing .NET MVC for incorporating HTML attributes with @HTMLTextAreaFor

I'm encountering an issue when trying to add HTML attributes to a text area using the @HTML command. Specifically, I am attempting to include a class name, but it doesn't seem to be working as expected. Below is the code snippet that I am workin ...

Is it possible to place an open div panel between two tweets?

I'm in the process of developing a UI with Twitter feeds. I want to create a feature where a panel can be opened between two tweets, causing the tweet below to shift downwards. This function is commonly seen in tweet clients like TweetBot; as each new ...

Can you help me identify the reason behind a page displaying a temporary horizontal scrollbar?

While browsing the following page in Google Chrome: A horizontal scrollbar appears briefly during page load. It seems that something hidden below the fold is causing this issue, but I haven't been able to identify the exact cause. EDIT:- Watch a v ...

What is the best way to insert an <image> tag into the SVG DOM?

Currently, I am facing an issue with adding a background image to the generated SVG DOM in my web page. The user interacts by drawing an SVG doodle on top of a jpg image using Raphael. After the user is done with their drawing, I want to enable them to sa ...

The combination of jquery, ajax, and php resulted in a successful GET request to http://www.site.dk/?userid=admin&pass=admin, returning a

Greetings! I am currently working on two separate Wordpress websites with different domains and I am attempting to pass some values from one site to the other using ajax. However, I am facing an issue. Even though the URL works fine when directly entered ...