0

I have a 'form' that displays text feedback (2 options) depending on how many checkboxes are selected. In principle this works however I would like to improve the animation/transition of how the text is displayed.

If you select all checkboxes, a p is slide into view. Any other amount you get a separate message which functions the same way. Currently this is 'hardcoded' to 5 checkboxes. Dunno if it's possible to make this more flexible based on a data attribute or something so if in future there's 6 - it's not a whole new block of JS?

But the main goal is when the message is displayed, it slides into view. However if you alter your answer and click 'submit' again, the animation is janky.

So I'd like to improve the transition between the update. I've done this elsewhere where it just slides open the first time (if that's easier) but I can't get it to work on this version.

Other implementation here: https://codepen.io/moy/pen/LYdoEBG

But I'd like both to be consistent if possible. So just a refresh/update/fade will be fine rather than both sliding. Unless it's possible to at least make the page/content below slide/push don't gracefully?

$(".form-feedback .btn").click(function () { let checkboxes = $(this).parents(".form-feedback").find('input:checked').length $(this).parents(".form-feedback").find(".form-feedback__reveal p").hide() if(checkboxes == 5){ $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200) }else{ $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200) } });
.hide { display: none; } .label { display: block; margin-bottom: 24px; } .checkbox { display: block; margin-bottom: 12px; } .btn { background: black; border-radius: 24px; color: white; display: inline-flex; padding: 12px 24px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boxout"> <div class="form-feedback"> <label class="label">HACCP helps a food business to...</label> <label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label> <label class="checkbox"><input type="checkbox">Identify critical control points</label> <label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label> <label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label> <label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label> <a href="#" class="btn btn--primary">Submit</a> <div class="form-feedback__reveal"> <p class="hide" data-feedback="all">That’s right, HACCP supports a business in all of the areas listed.</p> <p class="hide" data-feedback="some">That’s incorrect, HACCP actually supports a business in all of these areas.</p> </div> </div> </div> <div class="content"> <h4>Content below to check it gets pushed down smoothly</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

Improve this question

2 Answers 2

Reset to default
2 

$(".form-feedback .btn").click(async function () { let checkboxes = $(this).parents(".form-feedback").find('input:checked').length $(this).parents(".form-feedback").find(".form-feedback__reveal p").slideUp(200) await new Promise(res => { setTimeout(res, 200); }); $(this).parents(".form-feedback").find(".form-feedback__reveal p").hide() if(checkboxes == 5){ $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200) }else{ $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200) } });
.hide { display: none; } .label { display: block; margin-bottom: 24px; } .checkbox { display: block; margin-bottom: 12px; } .btn { background: black; border-radius: 24px; color: white; display: inline-flex; padding: 12px 24px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boxout"> <div class="form-feedback"> <label class="label">HACCP helps a food business to...</label> <label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label> <label class="checkbox"><input type="checkbox">Identify critical control points</label> <label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label> <label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label> <label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label> <a href="#" class="btn btn--primary">Submit</a> <div class="form-feedback__reveal"> <p class="hide" data-feedback="all">That’s right, HACCP supports a business in all of the areas listed.</p> <p class="hide" data-feedback="some">That’s incorrect, HACCP actually supports a business in all of these areas.</p> </div> </div> </div> <div class="content"> <h4>Content below to check it gets pushed down smoothly</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

This is getting toward the right direction I think. I've added an animation to close the slideDown. You could also add a check to make sure it doesn't slide up and back down if the text isn't going to change

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

2 Comments

That's awesome thanks. What do you think about the animation (general question) is it better to just slide into view initially? Than just instantly change? rather than slide up/down all the time?
My Opinion would depend on how much you use the animation. I think if it was less frequent, just a few times, then sliding would look better. If you intend for it to happen often then yeah, sliding could get annoying.
1

I think Jess' animation is what you're looking for, so this solution is based on

If you select all checkboxes, a p is slide into view. Any other amount you get a separate message which functions the same way. Currently this is 'hardcoded' to 5 checkboxes. Dunno if it's possible to make this more >flexible based on a data attribute or something so if in future there's 6 - it's not a whole new block of JS?

To ensure the onclick eventlistener on the .btn-element is handled properly, use target.preventDefault(). Seeing as the element is an <a>-element, clicking it will force your screenview to jump to the top. preventDefault() makes sure the viewport stays in place when you click on the link (although making it a <button> or <input type="submit"> is correct semantically and accessibility wise, unless it actually IS a link that will redirect the user)

When you say you want a "dynamic solution", I'm going to assume you want the message that appears when 5 inputs are selected to be shown if all inputs are selected, no matter the amount of input-elements there are.

You already have the variable checkboxes which contains the length of the amount of checkboxes that are checked. Just make a new, very similiar variable that holds the length of the total amount of checkboxes in the form, and in your if-statement, set those two variables to be equal to each other. This way, your message will always show if all of the checkboxes are checked.

$(".form-feedback .btn").click(function(e) { // remove default behaviour of the <a> e.preventDefault(); // variables that hold the length of checkboxes let checkedCheckboxes = $(this).parents(".form-feedback").find('input:checked').length; let checkboxes = $(this).parents(".form-feedback").find('input').length; $(this).parents(".form-feedback").find(".form-feedback__reveal p").hide() if (checkedCheckboxes === checkboxes) { $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='all']").slideDown(200) } else { $(this).parents(".form-feedback").find(".form-feedback__reveal p[data-feedback='some']").slideDown(200); } });
.hide { display: none; } .label { display: block; margin-bottom: 24px; } .checkbox { display: block; margin-bottom: 12px; } .btn { background: black; border-radius: 24px; color: white; display: inline-flex; padding: 12px 24px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boxout"> <div class="form-feedback"> <label class="label">HACCP helps a food business to...</label> <label class="checkbox"><input type="checkbox">Minimise risks in areas of food safety</label> <label class="checkbox"><input type="checkbox">Identify critical control points</label> <label class="checkbox"><input type="checkbox">Decide on actions to take if something goes wrong</label> <label class="checkbox"><input type="checkbox">Ensure procedures are followed and are effective</label> <label class="checkbox"><input type="checkbox">Ensure appropriate record keeping</label> <a href="#" class="btn btn--primary">Submit</a> <div class="form-feedback__reveal"> <p class="hide" data-feedback="all">That’s right, HACCP supports a business in all of the areas listed.</p> <p class="hide" data-feedback="some">That’s incorrect, HACCP actually supports a business in all of these areas.</p> </div> </div> </div> <div class="content"> <h4>Content below to check it gets pushed down smoothly</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>

Improve this answer

2 Comments

That sounds right, I'm wondering should it animate at all after the first click. Would it be easier if the first answer slide into view and then it just refreshed. What do you think?
I think at least some sort of animation when the feedback text changes would not only make it look better, but it also indicates that the feedback text changes, which is helpful for the user. You could also look into implementing a fadeout animation with a callback to just change the text inside a <p>-element, instead of showing/hiding 2 different <p>-elements. @user1406440

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.