<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Mobile Radio Buttons with extended field</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
position: relative;
height: 100%;
height: 100vh;
background: #fff5f6;
display: flex;
align-items: center;
justify-content: center;
}
form {
max-width: 250px;
position: relative;
margin: 0 auto;
font-size: 15px;
}
.radiobtn {
position: relative;
display: block;
}
.radiobtn .extended {
display: block;
width: 100%;
box-sizing: border-box;
overflow: hidden;
background: #fe8fa3;
margin-bottom: 5px;
margin-top: -7.5px;
border: 2px solid #fe4365;
border-top: 0;
border-radius: 0 0 5px 5px;
max-height: 0;
padding: 0;
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
transition: 0.3s -webkit-transform cubic-bezier(0.075, 0.82, 0.165, 1);
transition: 0.3s transform cubic-bezier(0.075, 0.82, 0.165, 1);
transition: 0.3s transform cubic-bezier(0.075, 0.82, 0.165, 1), 0.3s -webkit-transform cubic-bezier(0.075, 0.82, 0.165, 1);
}
.radiobtn .extended button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #fe4365;
background: #ffdbe2;
font-size: 13px;
text-align: center;
display: block;
width: 100%;
padding: 7px;
margin-top: 5px;
border-radius: 30px;
font-weight: 700;
outline: 0;
}
.radiobtn .extended textarea {
display: block;
width: 100%;
min-height: 100px;
box-sizing: border-box;
padding: 10px;
border-radius: 5px;
border: 2px solid #ffa8b8;
}
.radiobtn .extended textarea:focus {
border-color: #fe4365;
outline: 0;
}
.radiobtn label {
display: block;
background: #ffdbe2;
color: #444;
border-radius: 5px;
padding: 10px 20px;
border: 2px solid #ffa8b8;
margin-bottom: 5px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.radiobtn label:after, .radiobtn label:before {
content: "";
position: absolute;
right: 11px;
top: 11px;
width: 20px;
height: 20px;
border-radius: 3px;
background: #fe8fa3;
}
.radiobtn label:before {
background: transparent;
transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
z-index: 2;
overflow: hidden;
background-repeat: no-repeat;
background-size: 13px;
background-position: center;
width: 0;
height: 0;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}
.radiobtn input[type="radio"] {
display: none;
position: relative;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.radiobtn input[type="radio"]:checked + label {
background: #fe8fa3;
-webkit-animation-name: blink;
animation-name: blink;
-webkit-animation-duration: 1s;
animation-duration: 1s;
border-color: #fe4365;
}
.radiobtn input[type="radio"]:checked + label:after {
background: #fe4365;
}
.radiobtn input[type="radio"]:checked + label:before {
width: 20px;
height: 20px;
}
.radiobtn input[type="radio"]:checked + label + .extended {
max-height: none;
padding: 10px;
opacity: 1;
-webkit-animation-name: blink;
animation-name: blink;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-transform: scaleY(1);
transform: scaleY(1);
margin-top: -10px;
}
@-webkit-keyframes blink {
0% {
background-color: #fe8fa3;
}
10% {
background-color: #fe8fa3;
}
11% {
background-color: #ffa8b8;
}
29% {
background-color: #ffa8b8;
}
30% {
background-color: #fe8fa3;
}
50% {
background-color: #ffa8b8;
}
45% {
background-color: #fe8fa3;
}
50% {
background-color: #ffa8b8;
}
100% {
background-color: #fe8fa3;
}
}
@keyframes blink {
0% {
background-color: #fe8fa3;
}
10% {
background-color: #fe8fa3;
}
11% {
background-color: #ffa8b8;
}
29% {
background-color: #ffa8b8;
}
30% {
background-color: #fe8fa3;
}
50% {
background-color: #ffa8b8;
}
45% {
background-color: #fe8fa3;
}
50% {
background-color: #ffa8b8;
}
100% {
background-color: #fe8fa3;
}
}
</style>
</head>
<body>
<body>
<form>
<div class="radiobtn">
<input type="radio" id="huey"
name="drone" value="huey" checked />
<label for="huey">Field 1</label>
</div>
<div class="radiobtn">
<input type="radio" id="dewey"
name="drone" value="dewey" />
<label for="dewey">Extended Field</label>
<div class="extended">
<textarea placeholder="Why did you choose this..."></textarea>
<button>Go to next question</button>
</div>
</div>
<div class="radiobtn">
<input type="radio" id="louie"
name="drone" value="louie" />
<label for="louie">Field 3</label>
</div>
</form>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
// Focus the extended field after click
$(".radiobtn").on("click", "label", function() {
var isExtended = $(this)
.parent(".radiobtn")
.find(".extended");
if (isExtended.length > 0) {
setTimeout(function() {
isExtended.find("textarea").focus();
}, 1000);
}
});
</script>
</body>
</html>
