JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

<label class="addDiv" for="_1" id="button">Add more details?</label>
<input id="_1" type="checkbox">

<div class="inner" style="margin-top:20px;" id="moredetails1">
    <div class="inner1">
        <section>
            Enter Name:<input type="text" /><br /><br />
        </section>
    </div>
    <div class="inner2">
        <section>
            Enter Name:<input type="text" /><br /><br />
        </section>
    </div>
</div>

CSS

.addDiv{
    font-size: 20px;
    display:block;
    margin-top:40%;
    border:solid;
    width:16%;
    border-color:#808080;
        }

.addDiv + input + *{
 display:none;
 }
.addDiv + input{
  display:none;
}
.inner {
    border: 1px solid green;
    width: 100%;
    height: 600px;
}
.inner1 {
    position:relative;
    width:50%;
    height:500px;
    float:left;
    background:#808080;
    background-color:#808080;
    overflow:hidden;
}
.inner2 {
    position:relative;
    width:50%;
    height:500px;
    float:left;
    background:green;
    background-color:green;
    overflow:hidden;
}

JavaScript

$("#_1").change(function () {
        if($(this).is(':checked')){
           $("#moredetails1").fadeIn(300);
            $('html, body').animate({
                scrollTop: $("#moredetails1").offset().top
            }, 2000);
        }else{
            $("#moredetails1").fadeOut(300);
        }
    });