How to use jQuery to change css div visibility on checkbox input?

Question

I'm trying to change the visibility of a div based on a jQuery .click of a checkbox input.

I've been working on fixing an issue with a Full Screen CSS Nav. This is the modified CodePen: http://codepen.io/tedrem/pen/OVbYde

Visibility Toggle:

$.fn.toggleVisibility= function() {
var $this  = $(this);
if($this.css("visibility")=="hidden"){
    $this.css("visibility","visible")
}else{
    $this.css("visibility","hidden")
}
return this;
};

Checkbox Click to Initiate the Function:

$(".checkbox-toggle").click(function (){
   $("#links").toggleVisibility();
})

Relevant HTML Lines: 3 & 7
Relevant CSS Lines: 123

NOTE: This is currently not working. The div remains hidden

Your codepen doesn't include jquery, so it's throwing an error: Uncaught ReferenceError: $ is not defined. I added jQuery and it works fine. — ray
– ray, Commented May 28, 2015 at 3:21
@T3D Could you define more clearly, what you want? I mean you want is that the menu links(About,Products,Blog,Contact) to display on click menu icon? — divy3993
– divy3993, Commented May 28, 2015 at 3:27

jpcanamaque · Accepted Answer · 2015-05-28 07:17:19Z

1

Based on your example (on the link), Just remove Line 123 on your CSS and it will be fine.

edited May 28, 2015 at 7:17

answered May 28, 2015 at 3:22

jpcanamaque

1,0791 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use jQuery to change css div visibility on checkbox input?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related