Issue with applying Jquery toggleClass to an element

Question

Issue with applying Jquery toggleClass to an element

I'm encountering an issue with applying a toggleClass that is not working to add the new class. Can someone help me understand what's happening?

<a href="#" id="cf_onclick">Click</a> 
<div id="main" class="invisible">
Hi there            
</div> 

.invisible{
   opacity: 0;

}
.visible{
  opacity: 1;
  -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
}


$(document).ready(function() {
  $("#cf_onclick").click(function() {
  $("#main").toggleClass("visible");
});
});

Check out the solution in action on jsFiddle:

http://jsfiddle.net/Gilgamesh415/grxQX/17/

javascript jquery html css

Answer 1

Answer №1

Don't forget to include the jQuery library if you are working on your fiddle. You can add it in the top left corner of the jsfiddle window.

For more information, visit this link.

If you are checking your website, make sure the jQuery library is loaded by including

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

within your head tags.

Answer 2

Don't forget to include the jQuery library if you are working on your fiddle. You can add it in the top left corner of the jsfiddle window.

For more information, visit this link.

If you are checking your website, make sure the jQuery library is loaded by including

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

within your head tags.

Answer 3

Answer №2

Give this a shot:

 <script type="text/javascript">
    $(document).ready(function() {
    $("#s").click(function(){

$("#main").toggleClass("n");
});
});
</script>

<div id="main" class="m"></div>
<button id="s">click</button>

<style type="text/css">
    .m
{ opacity:0;}
.n
{
 width:100px;
    height:100px;
    border:2px solid yellow;
    background:green; 
    -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
    opacity: 1;   
}
</style>

Check out the demo here:http://jsfiddle.net/65Hg4/1/

Answer 4

Give this a shot:

 <script type="text/javascript">
    $(document).ready(function() {
    $("#s").click(function(){

$("#main").toggleClass("n");
});
});
</script>

<div id="main" class="m"></div>
<button id="s">click</button>

<style type="text/css">
    .m
{ opacity:0;}
.n
{
 width:100px;
    height:100px;
    border:2px solid yellow;
    background:green; 
    -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
    opacity: 1;   
}
</style>

Check out the demo here:http://jsfiddle.net/65Hg4/1/

Answer 5

Answer №3

$(".custom_toggle").on("click", function(event) {
   event.preventDefault();
  $(".content_area").toggleClass("hidden").toggleClass("shown");
});

http://example.com/js_example

Answer 6

$(".custom_toggle").on("click", function(event) {
   event.preventDefault();
  $(".content_area").toggleClass("hidden").toggleClass("shown");
});

http://example.com/js_example

Answer 7

Answer №4

Consider utilizing a self-invoking anonymous function:

(function(){
.... //your code
}(jQuery));

rather than

$(document).ready(function(){...});

As it is recommended to load scripts at the bottom of your page, right before the closing </body> tag, there is no need to verify if the document has been loaded ($(document).ready()), as it will already have been.

Check out this example http://jsfiddle.net/micka/94pNW/

Answer 8

Consider utilizing a self-invoking anonymous function:

(function(){
.... //your code
}(jQuery));

rather than

$(document).ready(function(){...});

As it is recommended to load scripts at the bottom of your page, right before the closing </body> tag, there is no need to verify if the document has been loaded ($(document).ready()), as it will already have been.

Check out this example http://jsfiddle.net/micka/94pNW/

Issue with applying Jquery toggleClass to an element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Converting wiki content to HTML with the help of PHP and JavaScript

Ways to adjust brightness of a color using jquery

Creating a CSS button that spans multiple lines within a paragraph while maintaining the appearance of an anchor tag, even in

The first ajax request went off without a hitch, but the second one hit a snag and displayed a parse error

Fixed header in a div, allowing content to scroll when hovering over the header

Tips for adjusting the position of overflowing text on a website using CSS in real-time

Is specificity a characteristic of JavaScript?

Having trouble attaching an onClick / Event Listener to a ListItem using MaterialUI

determining the perfect size of a container by analyzing its content

Tips for accessing a website and logging in to extract important data for scraping purposes

Looking for a quick guide on creating a basic RESTful service using Express.js, Node.js, and Mongoose?

React Redux Connect MapState not refreshing when filtering an item from a list

Knockout Js' observable objects are not updating the UI to reflect changes in the data

Utilize jQuery to extract data from a JSON string

Struggling to compare array elements with input value and receiving a false result using jQuery

Utilize JavaScript, MySQL, and PHP to input data into a database

The absence of a closing parentheses in the argument is causing an issue when rendering

Generate a vertical line that spans the entire length of the webpage in a vertical direction

The dirtyVertices feature in Three.js seems to be malfunctioning

Content refuses to show up on my social networking website project when Ajax is employed