JSFiddle - React, Tailwind, and code Playground
HTML
<form class="content" action="/api/user/splash_signup" method="POST">
<ul id="questions">
<li id="q1">
<p>Question 1
<input type="radio" name="question1" value="true" id="q1yes"><label for="q1yes">Yes</label>
<input type="radio" name="question1" value="false" id="q1no"><label for="q1no">No</label>
</p>
</li>
</ul>
</form>
SCSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
list-style-type: none;
}
form {
ul {
text-align: center;
margin: 40px auto 0;
max-width: 576px;
li {
display: none;
border: 1px solid #000;
padding: 10px;
background: black;
color: #FFF;
text-shadow: 1px 1px 2px #000;
border-radius: 2px;
box-shadow: 0 2px 3px -2px #CCC inset;
&:first-child {
display: inline-block;
}
p {
margin: 0;
font-size: 1.6rem;
//position: relative;
}
input[type=radio] {
opacity: 0;
position: absolute;
margin: 0;
&+label {
display: inline-block;
padding: 5px;
width: 50px;
border-radius: 2px;
cursor: pointer;
margin-left: 5px;
border: 1px solid #00acbb;
background: blue;
&:hover {
box-shadow: 0px 0px 3px 0px #00acbb;
}
&:nth-of-type(1) {
margin-left: 10px;
}
}
}
}
}
}
JavaScript
$('#questions').on('change', ':radio', next);
function next(){
var q = $(this).parents('li')
;
q.slideUp(5000, function(){
q.slideDown(5000);
})
}