So I have a box that contains the post content which is text. What happens is if the content "overflows", the box gets bigger, but the icons push out of the box. What I want to do is keep them as a solid location. Here's what I see
The comment, delete, and likes count is off to the side. And here's what I want it to look like, even when there is more content
Here's the CSS for the box
.main-content{
margin-top: 20px;
width: 100%;
min-height: 100px;
background: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
position: relative;
}
And the icons
.fa-comment {
float: right;
margin-top: 67px;
margin-right: 15px;
font-size: 24px;
cursor: pointer;
color: #69f;
}
.likes{
padding-left: 20px;
}
.fa-heart-o{
transition: 0.5s;
margin-top: 60px;
color: #FF6699;
font-size: 24px;
float: right;
margin-right: 15px;
cursor: pointer;
}
.fa-heart{
transition: 0.5s;
margin-top: 60px;
color: #FF6699;
font-size: 24px;
float: right;
margin-right: 15px;
cursor: pointer;
}
.fa-trash-o {
transition: 0.5s;
margin-top: 67px;
color: #ABA9A9;
font-size: 24px;
float: right;
margin-right: 15px;
cursor: pointer;
}
.icons{
float: right;
margin-right: 0%;
margin-top: 1%;
}
I'm not sure if I'd do this with CSS or JS, but any help would be great.
You can Add clearfix after comments block.
For example:
<div class="main-content">
...
Your images and text
...
<div class="clearBoth"></div>
</div>
<style>
.clearBoth{
clear:both;
}
</style>
You can use my block-style: jsfiddle
You might be over-complicating this.
Here's a fiddle: http://jsfiddle.net/Y6HSB/17/
As a rule of thumb, work on scoping out your DOM first, and make it clean and neat.
HTML:
<div class="comment">
<div class="comment-content">
<div class="image-holder">
<img src="">
</div>
<p>The comment text would go here. It could be really short or really long and it won't matter because this is ambiguous to size. It will resize automatically and clear the space below it because that's how this works when you keep your structures simple and float elements where needed while providing a clearfix to push things down when needed.</p>
</div>
<div class="comment-actions">
<a href class="likes">0 Likes</a>
<a href class="comment"><span class="fa fa-comment">comment</span></a>
<a href class="delete"><span class="fa fa-trash-o">delete</span></a>
</div>
</div>
Once you've got a nice DOM setup, create as little style as you need to get your basic structure.
CSS: (LESS OR SCSS for simplicity)
body {
background: #888;
}
.comment {
background: #fff;
padding: 10px;
border-radius: 10px;
.comment-content {
margin-bottom: 10px;
.image-holder {
float: left;
width: 60px;
height: 60px;
border: 1px solid #ccc;
margin-right: 10px;
}
}
.comment-content:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.comment-actions {
text-align: right;
a {
display: inline-block;
// you'd want to tweak the styles here. but it should not require much.
}
}
}
After this, you can customize it to meet your exact needs, but I find it easiest to work in steps like this to get your desired placement before adding any visual context.
Cheers!
Related
I'm working on an accordion. I've used jQuery for the animation. When I click on the accordion head the border that holds the + reduces in size. I only want the plus sign to change and the border to stay the same size.
$(document).ready(function() {
//toggle the component with class accordion_body
$(".accordion_head").click(function() {
$(this).removeClass('coll-back');
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(400);
$("plusminus").text('+');
$(this).removeClass('coll-back');
$('.rmv-cls').removeClass('coll-back');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(400);
$(this).children("plusminus").text('+');
$(this).removeClass('coll-back');
} else {
$(this).next(".accordion_body").slideDown(400);
$(this).children("plusminus").text('');
$(this).children("plusminus").append('<hr class="hr-clc">');
$(this).toggleClass('coll-back');
$(this).addClass('rmv-cls');
}
});
});
$('plusminus').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
}
#plus-1 {
position: relative;
top: 5px;
left: -27%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
<div class="acc-main">
<div class="container">
<div class="kind">
<div class="accordion_container">
<div class="accordion-main">
<div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
</div>
<div class="accordion_body" id="a1" style="display: none;">
<p class="para-acc">
</p>
</div>
</div>
</section>
The font used has its characters with different width, that is the characters + and - have different width. So when they switch, it affects the total width of the block.
You can solve it using a monospaced font, such as Monospace, Courier, Courier New or Lucida Console.
Another solution would be set a fixed width for the block.
First, the <span> must be an block element. You add to it display: inline-block. Then padding will be considered within total width as default, so you have 25px padding for left and right. Your block is about 72px (when +), then you can add width: 22px (50px + 22px = 72px fixed width).
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
display: inline-block; /* add this */
width: 22px; /* add this */
}
A little bit the height of the accordion head will change with that, but nothing big.
Add the following css code
.plusminus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
}
You have already added .active class to .plusmimus class on click of the accordion. I have added some extra CSS code to make it look better as you required.
$(document).ready(function() {
$('.plusminus').on("click", function() {
$(this).toggleClass('active');
});
});
.plusminus {
display: inline-block;
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 30px;
cursor: pointer;
position: relative;
}
.plusminus::before,
.plusminus::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #FFF;
transition: 0.15s ease-out all;
}
.plusminus::after {
width: 2px;
height: 16px;
}
.plusminus.active::before {
transform: rotate(180deg);
}
.plusminus.active::after {
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>
Please let me know if this helps.
I have an html css code for notification dropdown box the issues is i can't able to click the tag and same time i tried with javaScript also not working i can't understand this issues please advice me how to make a clickable tag..
$('.toparea-right > .setting-area > li').on("click",function(){
$(this).siblings().children('div').removeClass('active');
$(this).children('div').addClass('active');
return false;
});
//------- remove class active on body
$("body *").not('.toparea-right > .setting-area > li').on("click", function() {
$(".toparea-right > .setting-area > li > div").removeClass('active');
return true;
});
.dropdowns {
background: #FFF none repeat scroll 0 0;
border: 1px solid #e1e8ed;
list-style: outside none none;
max-height: 294px;
overflow: auto;
padding-left: 0;
position: absolute;
right: -175px;
text-align: left;
top: 55px;
width: 440px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.dropdowns.active{
opacity: 1;
visibility: visible;
}
.drops-menu {
list-style: outside none none;
padding-left: 0;
}
.drops-menu > li > a {
border-bottom: 1px solid #e1e8ed;
display: inline-block;
padding: 5px;
width: 100%;
}
.dropdowns > h6{
font-size: 15px;
}
.drops-menu > li > .tag {
color: #fff;
display: inline-block;
font-size: 11px;
padding: 0 6px;
position: absolute;
right: 0;
top: 0;
}
.drops-menu > li:nth-child(2n) > a {
background: whitesmoke none repeat scroll 0 0;
}
.drops-menu > li a img {
display: inline-block;
vertical-align: middle;
width: 10%;
border-radius: 100%;
margin-bottom: 10px;
margin-left: 10px;
height: 45px;
}
.mesg-meta {
display: inline-block;
padding-left: 30px;
vertical-align: middle;
width: -1%;
color: #000000;
padding-top: -21px;
top: 18px;
margin-top: 0px;
line-height: 25px;
}
.mesg-meta > h6 {
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 0;
text-transform: capitalize;
margin-left: -15px;
}
.mesg-meta > span {
color: #000000;
display: inline-block;
font-size: 12px;
line-height: 15px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.mesg-meta > i {
color: #000000;
font-size: 12px;
font-style: normal;
margin-left: -15px;
}
.drops-menu > li > a:hover {
background: #fafafa none repeat scroll 0 0;
}
.dropdowns > span {
border-bottom: 1px solid #ccc;
display: inline-block;
font-size: 14px;
padding: 0px 10px;
text-align: center;
width: 100%;
height: 59px;
margin-top: 0px;
}
.dropdowns > a.more-mesg {
display: inline-block;
font-size: 14px;
padding-bottom: 5px;
text-align: center;
text-transform: capitalize;
width: 100%;
}
.blue{background: #337ab7;}
.red{background: #ff0000;}
.green{background: #33b7a0;}
.dropdowns.active > a {
background: #fafafa none repeat scroll 0 0;
display: block;
font-size: 13px;
margin-bottom: 2px;
padding: 0px 0px;
text-align: center;
}
.dropdowns.active > a i {
font-size: 11px;
left: 8px;
position: absolute;
top: 10px;
}
.dropdowns.languages {
width: 100px;
}
.dropdowns.active > a:hover {
background: #f1f1f1 none repeat scroll 0 0;
}
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
I attached my CSS and HTML code and i tried it's working but URL is opening in another tab. i need open the url in same tab please tell me the solution how to fix this.
In your code dropdown isn't ever made visible.
I think, you on click of "Notifications" you have to toggle(hide/show) dropdown by toggling(adding and removing) "active" class on Notifications tag.
Once your dropdown becomes visible. clicks should work as you desire.
Sample working code:
Notifications
<script>
function toggleDropdownVisibility(event) {
var notificationBell = event.target;
if (notificationBell.classList.contains('active')) {
notificationBell.classList.remove('active');
} else {
notificationBell.classList.add('active');
}
}
</script>
In addition to that please remove onclick="window.location.href('view-post.php')" as window.location.href is not a function instead it a property to which a url can be assigned. like window.location.href='view-post.php' . But you can completely remove this onclick as its not needed.
Your code looks fine here , except that I don't understand why you have opacity:0 and visibility:hidden on the .dropdown css class. These are making your control not accessible.
But once I remove these 2 properties in css worked for me (on last version of Chrome)
My advice:
For tags you can use this :
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/. No need too much custom JS.
I have the solution for this, i tried that and it's working.
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns" id="MmailNoti">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("MmailNoti");
popup.classList.toggle("show");
}
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to make my responsive tabs to drop down like this
Desktop/Large Screen View
Mobile View
This is what code i have and I don't know if this is can be done using CSS only or need Javascript/jQuery.
<div class="bottomRight">
<input type="radio" id="popularUpload" name="upload" checked="checked">
<label for="popularUpload" class="popularUpload">Popular Uploads</label>
<input type="radio" id="recentUpload" name="upload">
<label for="recentUpload" class="recentUpload">Recent Uploads</label>
<input type="radio" id="gallery" name="upload">
<label for="gallery" class="gallery">Gallery</label>
<div class="popUploadContent">...</div>
<div class="recUploadContent">...</div>
<div class="galleryContent">...</div>
</div>
And here is my CSS code.
#popularUpload,
#recentUpload,
#gallery {
display: none;
}
.popularUpload {
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
position: relative;
cursor: pointer;
z-index: 500;
display: block;
width: 120px;
text-align: center;
float: left;
}
.recentUpload {
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
position: relative;
cursor: pointer;
z-index: 500;
display: block;
width: 110px;
text-align: center;
border-right: 1px solid #0b0e18;
border-left: 1px solid #0b0e18;
}
.gallery {
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
position: relative;
cursor: pointer;
z-index: 500;
display: block;
width: 60px;
text-align: center;
}
.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
color: #eeb10c;
transition: all .5s ease;
}
#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
background: #0b0f17;
color: #eeb10c;
transition: all .5s ease;
}
#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
visibility: visible;
transition: all .3s ease;
}
.popUploadContent,
.recUploadContent,
.galleryContent {
visibility: hidden;
background: #0b0f17;
position: absolute;
margin-top: 54px;
height: 299px;
}
.popUploadContentLeft,
.recUploadContentLeft,
.galleryContentLeft {
float: left;
width: 46.4%;
margin-left: 2.5%;
margin-top: 19px;
}
Or if you can suggest and edit my code, that will be better. Here is my JSFiddle https://jsfiddle.net/8druLycp/
You can use Bootstrap tabs : http://getbootstrap.com/javascript/#tabs. (Using javascript and jQuery), then personnalize it with CSS ?
EDIT 1
To make it responsive without using the solution above, still use Boostrap with its system of grid (e.g. col-md-3 col-sm-4 col-xs-12). So when it will be a small screen, each part of your tabs menu will take the full width. Check it out https://getbootstrap.com/examples/grid/
EDIT 2
An other solution and all I can suggest you for now and that works is to applicate this : http://tabcollapse.okendoken.com. See the demo : http://tabcollapse.okendoken.com/example/example.html
EDIT 3
Finally, here is a solution with the dropdown menu : https://jsfiddle.net/Alteyss/wypp0hz8/ :
div#tabsBlock > ul.nav-tabs > li.dropdown {
display: none;
}
#media screen and (max-width: 500px) {
div#tabsBlock > ul.nav-tabs > li.lg {
display: none;
}
div#tabsBlock > ul.nav-tabs > li.dropdown {
display: block;
}
}
I've set a limit (500px that you can change) so when it's under 500px width, the dropdown appears and the other tabs disappear. Then, you can personnalize it as you want in css in your web site ;)
(With pills : https://jsfiddle.net/Alteyss/wypp0hz8/5/)
I think a possible solution to you is to hide not selected tabs and give all of them a 100% width. Then you can add a class to control its display, this class can be toggled with very simple jQuery.
I show you an example on the snnipet. The only thing left is to control the active tab to show its label when is selected and use a caret to control the class toggle instead of the label.
To apply this to the mobile version only, just add it with a media-query.
$(function(){
$('.popularUpload').on('click', function(){
$('.recentUpload').toggleClass('shown');
$('.gallery').toggleClass('shown');
});
});
#popularUpload,
#recentUpload,
#gallery {
display: none;
}
.popularUpload {
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
display: none;
width: 100%;
text-align: center;
float: left;
}
.popularUpload.shown{
display: block;
}
.recentUpload {
display: none;
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
width: 100%;
text-align: center;
border-right: 1px solid #0b0e18;
border-left: 1px solid #0b0e18;
}
.recentUpload.shown{
display: block;
}
.gallery {
display: none;
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
width: 100%;
text-align: center;
}
.gallery.shown {
display: block;
}
.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
color: #eeb10c;
transition: all .5s ease;
}
#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
background: #0b0f17;
color: #eeb10c;
transition: all .5s ease;
}
#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
display: block;
transition: all .3s ease;
}
.popUploadContent,
.recUploadContent,
.galleryContent {
display: none;
background: #0b0f17;
height: 299px;
width: 100%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomRight">
<input type="radio" id="popularUpload" name="upload" checked="checked">
<label for="popularUpload" class="popularUpload shown">Popular Uploads</label>
<input type="radio" id="recentUpload" name="upload">
<label for="recentUpload" class="recentUpload">Recent Uploads</label>
<input type="radio" id="gallery" name="upload">
<label for="gallery" class="gallery">Gallery</label>
<div class="popUploadContent">popular content</div>
<div class="recUploadContent">recent content</div>
<div class="galleryContent">gallery content</div>
</div>
so, i made a simple animated progress bar in jQuery. you can view it here.
I need some code in this post, so here's my CSS:
.progress {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.filename {
font-size: 10px;
color: white;
position: relative;
}
.progresstop {
padding: 4px;
width: 40px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 8px;
float: left;
background: #c44639;
vertical-align: middle;
display: inline-block;
}
.arrow-right {
width: 0px;
height: 0px;
border-style: solid;
background: #111;
border-width: 7px 7px 7px ;
border-color: transparent transparent transparent #c44639;
float: left;
display: inline-block;
}
my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're completely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?
Altenatively to JoshC's answer,
you could wrap it in a container like this fiddle
HTML
<div id="progress-container">
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div>
<div class='filename'>FILENAME</div>
</div>
</div>
CSS
#progress-container {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.progress {
height: 14px;
width: 500px; /* large value */
}
Just make sure that the .progess width is larger than what you need (text, arrow, and bar)
You are looking for white-space: pre.
Here is an updated example - it works how you want it to now.
.filename {
white-space: pre;
}
EDIT
If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:
jsFiddle example - less HTML now, since the arrow is a pseudo element.
HTML
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */
<div class='filename'>FILENAME</div>
</div>
CSS
.filename:before {
content:"\A";
width: 0px;
height: 0px;
border-style: solid;
border-width: 7px 7px 7px;
border-color: transparent transparent transparent #c44639;
position:absolute;
}
I am using custom checkboxes with the input hidden wrapped in a span; I have written a script to add the class for checked, but it doesn't actually mark the inputs as checked. What am I doing wrong here?
UPDATE: So the checkbox checks now! Hooray. A new problem is that hiding the visibility on the checkbox, also hides the new class when checked on the area of the checkbox... if the label is clicked, then the checkbox shows as checked, but if the checkbox image itself is clicked, nothing changes...
HTML
<fieldset>
<label class="sublabel" title="Insights & Planning" for="checkbox-insights-and-planning">Insights & Planning</label>
<span class="open-checkbox">
<input id="checkbox-insights-and-planning" class="key-areas-checkbox" name="key-areas-of-interest" type="checkbox" />
</span>
</fieldset>
CSS
.open-checkbox {
background-position: -4px -48px;
background-image: url(../images/adcolor-sprite.png);
background-repeat: no-repeat;
cursor: pointer;
display: block;
float: right;
height: 25px;
margin-top: 10px;
width: 25px;
}
.checked {
background-position: -4px -12px;
background-image: url(../images/adcolor-sprite.png);
background-repeat: no-repeat;
cursor: pointer;
display: block;
float: right;
height: 25px;
margin-top: 10px;
width: 25px;
}
input[type=checkbox] {
visibility: hidden;
}
#key-areas-inputs label.sublabel {
display: block;
float: left;
height: 44px;
padding: 0 0 0 10px;
width: 300px;
}
#key-areas-inputs input.key-areas-checkbox {
float: right;
display: block;
clear: none;
height: 22px;
width: 22px;
margin-top: 18px;
margin-right: 4px;
margin-bottom: 0px;
margin-left: 0px;
}
#key-areas-label {
font-family: "Futura W01 Bold", Arial, Helvetica, sans-serif;
font-size: 16px;
color: #df007c;
display: block;
clear: left;
float: left;
width: 348px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 0px;
text-align: right;
}
JS
// check checked boxes on load
$(".key-areas-checkbox:checked").each(function(){
$(this).next().addClass('checked');
});
// add class and checked attribute to filter inputs
$('.open-checkbox').click(function () {
console.log('click');
var $this = $(this);
var $input = $this.find('input');
$this.toggleClass('checked', $input.is(':checked'));
return;
if($input.prop('checked')){
$this.removeClass('checked');
} else {
$this.addClass('checked');
}
});
to check the checkbox add:
$input.attr('checked','checked');
to uncheck:
$input.removeAttr('checked');
Your for and ids don't match. Change your id to "checkbox-insights-and-planning" (was missing an 's') and it should work.
Also make sure your image path is correct (we can't test that with your example code as it's a relative path; I just tried it with a background-color and it worked).
I figured out what the issue was. The JS was fine. The fix was to nest the inputs inside of the label and wrap inside of a div. This gave the desired effect.