JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://upload.neworleansonline.com/blueimp/js/bootstrap-collapse.js"></script>
<script src="http://upload.neworleansonline.com/blueimp/js/bootstrap-transition.js"></script>
<link rel="stylesheet" href="http://upload.neworleansonline.com/blueimp/css/bootstrap.min.css">
<p class="file_info">
    <label>Visible
        <input type="text" name="vis1" id="vis1" class="date" value="" />
    </label>
</p>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle accordion-arrow" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Show more fields
      </a>

        </div>
        <div id="collapseOne" class="accordion-body collapse out">
             <h5>Source/Use Metadata</h5>

            <p class="file_info">
                <label>Hidden:
                    <input type="text" name="default_original_source" id="default_original_source" class="" value="" />
                </label>
            </p>
        </div>
    </div>
</div>
<p class="file_info">
    <label>Visible
        <input type="text" name="vis2" id="vis2" class="date" value="" />
    </label>
</p>

CSS

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility: visible;
}