We Keep Coding

Validate radio button a multistep form using Javascript

I want to validate a multipage form using Js. Here is what I want the code to be, when I click 'next' i want it to validate whether the radio button has been checked or not. If not then display an alert popup. The multipage form already works but the problem here is I cannot validate the radio button on each page.
Hope anyone can help me solve this problem since I have been few days trying to solve this problem but I don't know how to do it. Thank you in advance.
HTML
<form class="form" action="" method="post">
<!-- Progress bar -->
<div class="progressbar">
<div class="progress" id="progress"></div>
<div class="progress-step progress-step-active" data-title="DEPARTMENT"></div>
<div class="progress-step" data-title="BLOCK"></div>
<div class="progress-step" data-title="TITLE"></div>
<div class="progress-step" data-title="DESCRIPTION"></div>
<div class="progress-step" data-title="DONE"></div>
</div>
<!-- start Steps 1-->
<div class="form-step form-step-active">
<br/>
<div class="page-header">
<h1>First, choose one department that is related to the complaint you are about to make.
<span style="color:#ffef96; font-size:15px;"><br/>
<p>Click any department for hint</p>
</span>
</h1>
<br/>
<div class="radio-toolbar">
<input type="radio" id="radio1" name="cdepartment" class="hint" value="GENERAL" required/>
<label for="radio1">GENERAL
<span class="hintclick"> e-Aduan UiTM used for
<span style="color:#ffef96">general complaints about UiTM.</span>
</span>
</label>
<input type="radio" id="radio2" name="cdepartment" class="hint" value="FACILITIES"/>
<label for="radio2">FACILITIES
<span class="hintclick">For
<span style="color:#ffef96">electrical, mechanical, telecommunications, event management.</span>
</span>
</label>
<input type="radio" id="radio3" name="cdepartment" class="hint" value="ICT"/>
<label for="radio3">ICT
<span class="hintclick">e-Aduan ICT used for
<span style="color:#ffef96">ICT complaints </span>
</label>
</div>
<br/>
</div><!-- page header-->
<div class="width-50 ml-auto" >
NEXT
</div>
</div>
<!-- end Steps 1 -->
<!-- start Steps 2 -->
<div class="form-step">
<br/>
<div class="page-header">
<h1>Second, which block do you wish to complaint about?</h1>
<br/>
<div class="radio-toolbar">
<div class="grid-container">
<?php
$count=4;
$sql="SELECT * FROM `block`";
$result=mysqli_query($connection,$sql);
while($std=mysqli_fetch_array($result))
{
?>
<input type="radio" id="<?php echo $std['bid'];?>" name="cblock" value="<?php echo $std['blockname'];?>" required/>
<label for="<?php echo $std['bid'];?>"><?php echo $std['blockname'];?></label>
<br/>
<?php }?>
</div>
</div>
</div> <!-- page header-->
<div class="btns-group width-50 ml-auto">
PREVIOUS
NEXT
</div>
</div>
<!-- end Steps 2 -->
<!-- start Steps 3 -->
<div class="form-step">
<br/>
<div class="page-header">
<h1>Third, pick a title or topic
<span style="color:#ffef96; font-size:15px;"><br/>
<p>If your related toppic is not listed, please fill in below text box instead.</p>
</span>
</h1>
<br/>
<div class="radio-toolbar">
<input type="radio" id="radioApple" name="radioFruit" value="apple" required/>
<label for="radioApple">Apple</label>
<input type="radio" id="radioBanana" name="radioFruit" value="banana"/>
<label for="radioBanana">Banana</label>
<input type="radio" id="radioOrange" name="radioFruit" value="orange"/>
<label for="radioOrange">Orange</label>
</div>
<div class="input-group">
<textarea type="text" class="form-control" row="5" name="cdescription" placeholder="Write here.." required/></textarea>
</div>
<br/>
</div>
<div class="btns-group width-50 ml-auto">
PREVIOUS
NEXT
</div>
</div>
<!-- end Steps 3 -->
<!-- start Steps 4 -->
<div class="form-step">
<div class="page-header">
<h1>Lastly, state your description regarding the complaint made
<span style="color:#ffef96; font-size:15px;"><br/>
<p> Below box you can write any notes about the complaint so the staff can help to understand</p>
</span>
</h1>
<br/>
<div class="input-group">
<textarea type="text" class="form-control" row="5" name="cdescription" placeholder="Write here.." required/></textarea>
</div>
</div>
<div class="btns-group width-50 ml-auto">
PREVIOUS
<button class="btn" type="submit" name="submit">SUBMIT</button>
</div>
</div>
<!-- end Steps 4 -->
<!-- start Steps 5 -->
<div class="form-step">
<div class="page-header">
<h1>THANK YOU <br/>
YOU CAN SEE RECENT COMPLAINT ON YOUR HOMEPAGE
</h1>
</div>
<!-- end Steps 5 -->
</form>
CSS
:root {
--primary-color: rgb(165, 121, 64);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.width-50 {
width: 30%;
}
.ml-auto {
margin-left: auto;
}
/* Progressbar */
.progressbar {
position: relative;
display: flex;
justify-content: space-between;
counter-reset: step;
margin: 2rem 4rem;
}
.progressbar::before,
.progress {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 4px;
width: 100%;
background-color: #dcdcdc;
z-index: -1;
}
.progress {
background-color: var(--primary-color);
width: 0%;
transition: 0.3s;
}
.progress-step {
width: 2.1875rem;
height: 2.1875rem;
background-color: #dcdcdc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.progress-step::before {
counter-increment: step;
content: counter(step);
}
.progress-step::after {
content: attr(data-title);
position: absolute;
top: calc(100% + 0.5rem);
font-size: 0.85rem;
color: #666;
}
.progress-step-active {
background-color: var(--primary-color);
color: #f3f3f3;
}
/* Form */
.form {
width: 80%;
margin: 30px auto;
border: 1px solid #ccc;
border-radius: 0.35rem;
padding: 1.5rem;
box-shadow:
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.form-step {
display: none;
transform-origin: top;
animation: animate 0.5s;
}
.form-step-active {
display: block;
}
.input-group {
margin: 2rem 0;
}
#keyframes animate {
from {
transform: scale(1, 0);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}
}
.row{
height:100%;
width: 50px;
}
/* Button */
.btns-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.btn {
padding: 16px;
display: block;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.2);
color: #f3f3f3;
text-align: center;
border-radius: 0.25rem;
cursor: pointer;
transition: 0.3s;
border-radius: 15px 25px;
box-shadow: 5px 8px 10px #888888;
}
.btn:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 3px ;
color: #f3f3f3;
}
/* end progress bar*/
.radio-toolbar {
margin-left: 10px;
text-align: center;
}
.radio-toolbar input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;
}
.radio-toolbar label {
display: inline-block;
background-color: #f0efef;
padding: 10px;
font-size: 18px;
border: 3px solid #444;
border-radius: 4px;
width: 300px;
height:auto;
}
.radio-toolbar label:hover {
background-color: #c2d4dd;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:focus + label {
border: 2px dashed #f0efef;
}
.radio-toolbar input[type="radio"]:checked + label {
background-color:#a57940;
border-color: #c2d4dd;
}
/* end radio button*/
.hint, label .hintclick {
display: none;
opacity: 0;
}
.hint:checked+ label .hintclick {
display: block;
opacity: 1;
font-size: 17px;
color: white;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto ;
}
.grid-container > label {
width: 100%;
}
JS
const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");
let formStepsNum = 0;
nextBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum++;
updateFormSteps();
updateProgressbar();
});
});
prevBtns.forEach((btn) => {
btn.addEventListener("click", () => {
formStepsNum--;
updateFormSteps();
updateProgressbar();
});
});
function updateFormSteps() {
formSteps.forEach((formStep) => {
formStep.classList.contains("form-step-active") &&
formStep.classList.remove("form-step-active");
});
formSteps[formStepsNum].classList.add("form-step-active");
}
function updateProgressbar() {
progressSteps.forEach((progressStep, idx) => {
if (idx < formStepsNum + 1) {
progressStep.classList.add("progress-step-active");
} else {
progressStep.classList.remove("progress-step-active");
}
});
const progressActive = document.querySelectorAll(".progress-step-active");
progress.style.width =
((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}

How to align checkbox and input filed/edittext widget to be on the same horizontal level

as shown in the screenshot attached, the input field or the edit text widget is appearing beneath the checkbox. I want to display all of the elements on the same line.
I tried to modify the css file but never gets the desired results.
please let me know how to align the edit text/input field to be on the same level with the check-box and the info button
html code:
<div id="select-pesticides-types-menu" *ngIf="showPesticidesTypesMenu">
<label class="clr-pesticides-control-label">{{ "SITE.PESTICIDES.LABEL" | translate}}</label>
<clr-toggle-container>
<clr-toggle-wrapper>
<input type="checkbox" clrCheckbox (change)="toggleShowPesticide1()" [(checked)]="showPesticide1"/>
<label >
{{ "SITE.PESTICIDES.TYPE_1" | translate }}
<clr-input-container id="pesticides-specifications">
<input
required
maxlength="25"
clrInput
[(ngModel)]="sele"
type="text"
name="name"
/>
</clr-input-container>
<button id= "pesticide-type-help-info-icon" class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DISTANCE_MEASUREMENT')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
</label>
</clr-toggle-wrapper>
</clr-toggle-container>
</div>
css:
#pesticides-specifications{
position: absolute;
top: 0px;
bottom: 40x;
right:0px;
left:30px;
padding: 15px;
width: 10px;
height:5px;
}
#select-pesticides-types-menu {
position: absolute;
top: 50px;
right:340px;
padding: 15px;
width: 370px;
height: 500;
border: 1px solid white;
border-radius: .15rem;
background-color: white;
z-index:2;
cursor: pointer;
}
img:
[![enter image description here][1]][1]

U can use only CSS if you want to align, Checkbox, The Text and The info Button
clr-toggle-wrapper{
display:flex;
align-items: center;
}
label {
display:flex;
align-items: center;
}

Create a Tag with an input

I have an input for writing tags. My problem is that I wanted to write in the input any name of tag and by pressing enter or clicking the button, the tag was created in the box below as shown in the image.
What I have
What I want when I press enter key or button plus
Final
.TagInput {
width: 400px;
height: 32px;
background: #FAFAFB 0% 0% no-repeat padding-box;
border-radius: 16px;
background: url(https://cdn0.iconfinder.com/data/icons/social- messaging-ui-color-shapes/128/add-circle-blue-512.png) no-repeat scroll 370px 3px;
}
.card {
width: 435px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
}
<div class="card">
<div class="card-header header">
<h1> Tags </h1>
</div>
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control TagInput" placeholder="Tag your product...">
</div>
</div>
</div>

I'm not so familiar with bootstrap to be honest. But maybe you can try out an Angular solution. This could be a starting point:
CSS
.your-class{
list-style-type: none;
display:inline-block;
position:relative;
background:#eee;
padding:5px;
min-width:50px;
text-align: center;
border-radius:30px;
margin-right:10px;
}
HTML
<ul>
<li *ngFor="let tag of tags" class="your-class">
{{tag}} <span class="delete-entry" (click)="deleteTagFromProduct(tag)">x</span>
</li>
</ul>
<input (change)="addTagToProduct($event)" class="form-control TagInput"/>
Typescript
private tags:string[] = [];
private addTagToProduct( $event ):void {
this.tags.push($event.target.value);
$event.target.value = "";
}
private deleteTagFromProduct( tag:string ):void {
this.tags = this.tags.filter( (a) => a!==tag );
}

Change image when radio button checked

I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>

You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.

You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.

You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.

first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}

Dynamic view on a sliding panel with jQuery

Have you ever seen someone's code and just laughed? Be ready to do so with my jQuery as it may not make any sense to you, but I'm trying :)
Anyway, what I need is simple and I've gotten some inspiration from other questions here such as Slide Panel up and down but they don't do exactly what I need. At least methinks.
I have a panel immediately below my header (BOOTSTRAP). This panel needs to be there but the user must have a choice to close it a little, not the whole way. Just enough to still have the fa-chevron icon available to click it and slide it back down as well as some information (I'll provide images below).
So in a nutshell, the requirements are:
Starts open, fa-chevron-up
On icon click, the panel slides up (sort of slowish), hides the photo and second row of information, and switches the icon to fa-chevron-down.
On click of fa-chevron down (collapsed view) everything returns to the initial full view.
Here is the HTML
<div id="header" class="header navbar navbar-fixed-top navbar-inverse" data-current-theme="navbar-inverse">
</div>
<div class="row">
<div class="col-xs-12">
<div class="banner clearfix">
<div class="collapser">
<i class="fa fa-chevron-up fa-fw collapse-icon"></i>
</div>
<div class="banner-info clearfix">
<div class="col-sm-12 col-md-2">
<div class="circle-container">
<img class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGjucaoN3fabOcumnr7RKTB3ICTJFLuLClnpiQUIR9oW4a11wb" alt="offender-img">
</div>
</div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Full Name</label>
<span>Floyd "Money" Mayweather</span>
</div>
<div class="form-group">
<label class="control-label">Some Label</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Offender ID#</label>
<span>123569863</span>
</div>
<div class="form-group">
<label class="control-label">Longer Label Example</label>
<span>Something Here with an ellipsis</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span>Something Here</span>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="form-group">
<label class="control-label">Institution</label>
<span>Graterford</span>
</div>
<div class="form-group">
<label class="control-label">Some Link</label>
<span href="#"><p>Something Here</p></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the CSS
.navbar {
border: none;
border-bottom: 2px solid #30373e;
font-size: 14px;
-webkit-box-shadow: 0 1px rgba(0,0,0,0.025);
box-shadow: 0 1px rgba(0,0,0,0.025);
z-index: 1040;
margin-bottom: 0;
height: 55px;
}
.banner {
border: none;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.07);
box-shadow: 0 2px 0 rgba(0,0,0,0.07);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
position: relative;
background: #101113;
padding: 20px;
display: block;
top: 55px;
}
.banner .collapser {
position: absolute;
bottom: 10px;
color: #bbb;
}
.banner .circle-container {
position: relative;
left: 35px;
text-align: center;
width: 110px;
height: 110px;
display: flex;
overflow: hidden;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
border: 3px solid #bbb;
}
.banner .banner-info label {
color: rgba(248,151,29,0.77);
}
.banner .banner-info span {
display: block;
color: #bbb;
white-space: nowrap;
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
}
and the very vague and probably useless JS
$('.collapser').click(function () {
$collapser = $(this);
$banner = $collapser.parent().find('.banner');
$banner.slideToggle(500, function () {
$collapser.find('.collapse-icon').toggleClass('fa-chevron-up fa-chevron-down');
});
});
Here are both views for visual references
Initial view
collapsed view
And here is CODEPEN

No .banner elements appears as child of $collapser.parent() ?
Try changing .banner to .banner-info at $banner = $collapser.parent().find(".banner-info");
codepen http://codepen.io/anon/pen/WrXYGx
Is there a way to slide it up less than that? or would that be a whole
different deal? Because I can hide the photo and the second row if I
mess with it long enough, but I still need the first row to remain
visible.
Use selector $banner = $collapser.parent().find('.banner-info .circle-container, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)') as $banner collection
$('.collapser').click(function() {
$collapser = $(this);
$banner = $collapser.parent()
.find('.banner-info .circle-container\
, .col-md-10 > .col-md-3 > .form-group:nth-of-type(2)');
$banner.slideToggle(500, function() {
$collapser
.find('.collapse-icon')
.toggleClass('fa-chevron-up fa-chevron-down');
});
});
codepen http://codepen.io/anon/pen/WrXYGx