JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Content Row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel-group" id="accordion">
            <!-- panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <span class="fa-stack fa-2x">
                                                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                                                    <i class="fa-stack-1x fa-inverse">1</i>
                                                </span>
                                            </td>
                                            <td>&nbsp;</td>
                                            <td style="font-size:16pt">Panel Title</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>Panel Body</p>
                        </div>
                    </div>
       ...

JavaScript

$('div.panel-group#accordion .panel').click(function() {
	$(this).addClass('clicked');
  var count = $(this).parent().find('.panel').length, ctr = 0;
	$(this).parent().find('.panel').each(function() {
  	if($(this).hasClass('clicked')) { ctr++; }
  });
  if(ctr === count) { $('button#Continue').removeClass('hidden disabled'); }
})