Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nancy Melucci
Courses Plus Student 35,157 PointsHow to prevent default on jquery toggleClass?
I need to show or hide a div with a cancellation policy on a button click. I am using toggleClass() but the div does not remain visible. I suspect this requires the addition of prevent default code but I cannot find an explanation out there in internet land that I grasp. I don't know whether to write a separate "prevent default" function and where to add the code to the toggleClass() (if to do that at all).
This is the kind of thing that makes me feel dim. There are instructions for it everywhere but I can't figure out how to apply them.
I will include the code for the div, css classes and button and the script below. Thanks.
<form>
<button onclick="myFunction()">Cancellation Policy</button>
<div class="hidepolicy">
<br>
<p>
VHS art party kitsch waistcoat ugh. Vice af aesthetic pinterest austin poke. Four dollar toast meh synth, iceland letterpress franzen selvage kinfolk single-origin coffee artisan. Pop-up cornhole you probably haven't heard of them fam, +1 ramps enamel pin microdosing four loko venmo. Organic freegan venmo stumptown, listicle pop-up etsy blue bottle tousled copper mug. Synth selvage ethical food truck whatever kitsch. Keytar put a bird on it shoreditch pug pickled.</p>
</div>
</form>
.hidepolicy {
display: none;
}
.showpolicy {
display: block;
}
function myFunction() {
$('.hidepolicy').toggleClass('hidepolicy showpolicy');
}
7 Answers
james south
Front End Web Development Techdegree Graduate 33,271 Pointsone thing i changed is to add the type attribute to the button. since it is inside the form tag, it operates to reload the page on a click. adding type=button stops that behavior. if it's only doing stuff for a second that might be why....???
james south
Front End Web Development Techdegree Graduate 33,271 Pointsdid you look at event.preventDefault()?
james south
Front End Web Development Techdegree Graduate 33,271 Pointsis this the functionality you are looking for?
<!doctype html> <html lang="en"> <head> <title></title> <link href='style.css' rel='stylesheet' type="text/css"> </head> <body>
<form>
<button type="button" id="button">Cancellation Policy</button>
<div class="hidepolicy">
<br>
<p>
VHS art party kitsch waistcoat ugh. Vice af aesthetic pinterest austin poke. Four dollar toast meh synth, iceland letterpress franzen selvage kinfolk single-origin coffee artisan. Pop-up cornhole you probably haven't heard of them fam, +1 ramps enamel pin microdosing four loko venmo. Organic freegan venmo stumptown, listicle pop-up etsy blue bottle tousled copper mug. Synth selvage ethical food truck whatever kitsch. Keytar put a bird on it shoreditch pug pickled.</p>
</div>
</form>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="app.js" type="text/javascript"></script>
</body> </html>
.hidepolicy {
display: none;
}
$("#button").on("click", function(){
$(".hidepolicy").toggle();
});
Nancy Melucci
Courses Plus Student 35,157 PointsYes, a few times. I can't figure out whether to make it a separate function OR to wrap my toggleClass inside it. I will try both I guess. I thought I had...but I'll give it another shot. And let you know if one works.
Nancy Melucci
Courses Plus Student 35,157 PointsOK, I just do not know where to put the code. The example in the JQuery API applies it to an "a" element and that is (sort of) built in.
But I am adding it a function I created that is supposed to hide and show a div. And every where I put the code (shown below) it breaks my page entirely.
Any hint would be appreciated. The example is helpful if one is trying to keep the user from leaving the page or clicking on a link. I am having a hard time adjusting it for my purpose. I am still pretty shaky at most of this, btw, but for some reason JavaScript and its variants give me a particularly hard time.)
function myFunction() {
$('.hidepolicy').toggleClass('hidepolicy showpolicy');
}
$( ".hidepolicy" ).click(function( event ) {
event.preventDefault();
}
Nancy Melucci
Courses Plus Student 35,157 PointsI have to confess I am not 100% sure where to put all the parts. It's toggling the tab system now, and only for a second. It's OK. I have to submit it by midnight. I'll get it later on down the line. I appreciate your kindness responding to me.
Nancy Melucci
Courses Plus Student 35,157 PointsYay! That got it to show and not do the flashing thing. I'll keep working on the other part of the toggle.