我试图隐藏按钮，直到点击页面上的所有必需元素。我找到了如何在单击一个项目之前隐藏元素但不确定如何设置此元素以隐藏按钮，直到单击所有项目。
我希望用户点击的元素是手风琴面板，ID为＆＃34; collaspeone＆＃34;，＆＃34; collaspetwo＆＃34;等等。我希望用户点击每个面板（导致它们展开），然后一旦他们点击每个面板，在页面底部显示一个按钮，允许他们继续下一页。
这是我想要仅在每个面板被点击时显示的元素。
<button id="Continue" class="btn btn-primary"><a href="AddSupplier-SubmitReq.aspx" style="color:white">Continue to Set-Up<i class="fa fa-arrow-right" aria-hidden="true"></i></a></button>
这是我的完整HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html lang="en" class="no-js">
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="canonical" href="http://html5-templates.com/" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
<link rel="manifest" href="/manifest.json"/>
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/>
<meta name="theme-color" content="#ffffff"/>
<title>MySLM Portal</title>
<meta name="description" content="A minimalist Bootstrap theme by StartBootstrap. Contains everything you need to get started building your website. All you have to do is change the text and images.">
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/modern-business.css" rel="stylesheet"/>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="css/footer.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.submenu').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="https://cargillonline.sharepoint.com/sites/ProcureToPay/SitePages/MySLM/Assets/CargillLogo.png"/>
<a href="Home.aspx"><img src="https://cargillonline.sharepoint.com/sites/ProcureToPay/SitePages/MySLM/Assets/SLMPortal.png"/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="Scope.aspx">Scope</a>
</li>
<li>
<a href="AddSupplier-FirstSteps.aspx">General Questions</a>
</li>
<li>
<a href="FAQs.aspx">FAQ's</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Processes<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="../Create.aspx" target="_blank">Create a New Supplier</a>
</li>
<li>
<a href="../Update.aspx" target="_blank">Update an Existing Supplier</a>
</li>
<li>
<a href="../Reactivate.aspx" target="_blank">Reactivate a Supplier</a>
</li>
<li>
<a href="../Deactivate.aspx" target="_blank">Deactivate a Supplier</a>
</li>
</ul>
</li>
<li>
<a href="Contact-Us.aspx">Contact</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="../ERS.aspx" target="_blank">ERS Agreement Library</a>
</li>
<li>
<a href="../Corp Record List.aspx" target="_blank">Corp Record List</a>
</li>
<li>
<a href="../Sanctioned Supplier List.aspx" target="_blank">Sanctioned Supplier List</a>
</li>
<li>
<a href="../Supplier Deactivation Listing.aspx" target="_blank">Supplier Deactivation Listing</a>
</li>
<li class="divider"></li>
<li>
<a href="https://team.cargill.com/sites/NAP/HELP/SitePages/RemedyForce.aspx" target="_blank">RemedyForce Training</a>
</li>
<li>
<a href="http://strategicsourcing.cargill.com/PROCUREMENT/procurementwebsite.nsf/" target="_blank">Select Supplier Search</a>
</li>
<li>
<a href="https://www.yammer.com/cargill.com/#/threads/inGroup?type=in_group&feedId=620515" target="_blank">Yammer: Source to Pay NA</a>
</li>
<li class="divider"></li>
<li>
<a href="JobAids.aspx">Job Aids</a>
</li>
<li>
<a href="SelfHelp.aspx">Knowledge/Self Help Articles</a>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#" class="submenu">Policies<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Spending%20Policies/Sourcing-and-Purchasing-Policy.aspx" target="_blank">Sourcing and Purchasing Policy</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Anti-bribery-Policy.aspx" target="_blank">Anti-bribery Policy</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Financial%20and%20Market%20Risks/Bank-Account--Payment-Control-Policy.aspx" target="_blank">Bank Account & Payment Control Policy</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Competition-Policy.aspx" target="_blank">Competition Policy</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Conflicts-of-Interest-Policy.aspx" target="_blank">Conflicts of Interest Policy</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Financial%20and%20Market%20Risks/Country-Risk-Policy.aspx" target="_blank">Country Risk Policy</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Insider-Trading-Policy.aspx" target="_blank">Insider Trading Policy</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Legal-Services-Policy.aspx" target="_blank">Legal Services Policy</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/Ethics_Compliance/suppliercode/Pages/default.aspx" target="_blank">Supplier Code of Conduct</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/Pages/Business%20Conduct%20Pages/Trade-Sanctions-Policy.aspx" target="_blank">Trade Sanctions Policy</a></li>
<li><a tabindex="-1" href="https://sites.cargill.com/sites/PolicyCenter/_layouts/15/WopiFrame.aspx?sourcedoc=/sites/PolicyCenter/SiteCollectionDocuments/Spending/Sourcing.Purchasing/United%20States%20and%20Canada%20Purchasing%20Cards%20Procedure.docx&action=default" target="_blank">United states & Canada Purchasing Cards Procedure</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Links<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="http://cargill.sourcing.ariba.com" target="_blank">Ariba</a>
</li>
<li>
<a href="https://team.cargill.com/sites/P2PNA/_layouts/15/start.aspx#/Lists/Business_Stakeholder_Library/Tiles.aspx" target="_blank">P2P Business Stakeholder Library</a> </li>
<li>
<a href="https://cargill15--bmcservicedesk.na74.visual.force.com/apex/StdSelfServiceHome?sfdc.tabName=01ro0000000HBPc&tsid=02uo00000002kY1" target="_blank">RemedyForce</a>
</li>
</ul>
</li>
<li><a href="https://cargillonline.sharepoint.com/search/Pages/results.aspx?k=" target="_blank"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Modale -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Wait! Make Your Job Easier!</h4>
</div>
<div class="modal-body">
<p><b>Source through CSSP!</b></p>
<p>By sourcing through CSSP you can avoid having to navigate the entire complex supplier setup process and focus on your job while CSSP works for you in the background sourcing you a supplier and having them set-up in the appropriate ERP system for your use!</p>
<button class="btn btn-primary"><a href="Source.aspx" style="color:white">Lets go! <i class="fa fa-arrow-right" aria-hidden="true"></i></a></button>
<p> </p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No, I do not want to make my job easier</button>
</div>
</div>
</div>
</div>
</div>
<!-- /.modale -->
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Set-up a New Supplier
<small>First Steps</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$('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');
}
})
</script>
<div class="row">
<div class="col-lg-12">
<p style="font-size:14pt">The following steps should be completed by the requester prior to submitting a request to set-up a new supplier. Failure to perform these steps may result in rejection of, or delays on your request.</p>
</div>
</div>
<!-- Content Row -->
<!-- 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> </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>
</div>
<!-- /.panel -->
<!-- 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="#collapsetwo">
<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">2</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- 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="#collapsethree">
<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">3</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- 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="#collapsefour">
<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">4</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- 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="#collapsefive">
<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">5</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.panel-group -->
</div>
<!-- /.col-lg-12 -->
</div>
<!--Continue button -->
<button id="Continue" class="btn btn-primary hidden disabled"><a href="AddSupplier-SubmitReq.aspx" style="color:white">Continue to Set-Up<i class="fa fa-arrow-right" aria-hidden="true"></i></a></button>
<!--/.Continue button -->
<!--Check out FAQ's -->
<hr>
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Questions? Check out our FAQ's</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-primary btn-block" href="Faqs.aspx">Go to FAQ's!</a>
</div>
</div>
</div>
<!--/.Check out FAQ's -->
</div>
<!-- /.row -->
<!-- Footer -->
<div style="padding-top:30px">
<div class="footer-position hidden-print ms-dialogHidden" style="padding-top: 0px;">
<div class="ava footer">
<div class="inner">
<div class="top">
<div class="thrive left">
<div class="inner"></div>
</div>
<div class="thrive right">
<div class="inner"></div>
</div>
</div>
<div class="bottom container-fluid clearfix">
<div class="row clearfix" data-bind="foreach: footerData">
<div class="col-xs-12 col-sm-3 col-md-2 pull-right text-right">
<div class="link">
<a data-bind="text: $data.Title, attr: { href: $data.Url}" href="https://sites.cargill.com/sites/Ethics_Compliance/CodeConduct/Pages/default.aspx">Code of Conduct</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-2 pull-right text-right">
<div class="link">
<a data-bind="text: $data.Title, attr: { href: $data.Url}" href="https://sites.cargill.com/sites/Ethics_Compliance/suppliercode/Pages/default.aspx">Supplier Code of Conduct</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-2 pull-right text-right">
<div class="link">
<a data-bind="text: $data.Title, attr: { href: $data.Url}" href="https://sites.cargill.com/sites/PolicyCenter/Pages/default.aspx">Policy Center</a>
</div>
</div>
</div>
<div class="copyright pull-right">© <span data-bind="text: year">2017</span> Cargill, Incorporated. All Rights Reserved</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.Footer -->
</body>
</html>
答案 0 :(得分：2)
我能想到的最简单的方法是跟踪点击的元素。 如果您要跟踪的数组与要单击的元素数相同，请显示该数字。
$(function(){
// an array to keep track of the clicked elements
var clicked = [];
$('.panel').click(function(e){
// only add them if they are not already clicked before
if(!clicked.includes(event.target.id)){
clicked.push(event.target.id);
// once the clicked elements array is the same length as all the
// elements that need to be clicked, display the button
if(clicked.length === $('.panel').length){
$('#theButton').show();
};
}
});
});.panel{
float: left;
width: 30px;
height: 20px;
border: 1px solid black;
}
.hidden{
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="p1" class="panel">1</div>
<div id="p2" class="panel">2</div>
<div id="p3" class="panel">3</div>
<div id="p4" class="panel">4</div>
<button id="theButton" class="hidden">move on</button>
答案 1 :(得分：0)
添加{
"status":"sent",
"emailSubject":"Testing with DocuSign",
"templateId":"124faf68-3b42-43b9-9b6d-814d465e161d",
"templateRoles":
[{
"roleName":"Climber",
"name":"xyz",
"email":"temp@email.com",
"clientUserId":"126789",
"tabs":{
"fullNameTabs":[{
"tabLabel":"CustomField1",
"value":"abc"
}],
"companyTabs":[{
"tabLabel":"Company 2fdbb190-2f3e-4d39-8202-e15b9a1c332a,
"value":"Temporary companyname"
}]
}
}]
}
（每个面板不同）点击累加器内的面板，当其长度达到href时，显示您的按钮。
5var panelsClicked = [];
$('.panel').on('click', function() {
var href = $(this).find('a').attr('href');
if(!panelsClicked.includes(href)){
panelsClicked.push(href);
if(panelsClicked.length === 5) {
$('#Continue').show();
}
}
});
答案 2 :(得分：0)
Another variation would be to add a class "clicked" and display the button if the number of panels with class clicked is equal to total number of panels within the accordion.
$('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');
}
})<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 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> </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>
</div>
<!-- /.panel -->
<!-- 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="#collapsetwo">
<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">2</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- 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="#collapsethree">
<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">3</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- 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="#collapsefour">
<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">4</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
<!-- 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="#collapsefive">
<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">5</i>
</span>
</td>
<td> </td>
<td style="font-size:16pt">Panel Title</td>
</tr>
</tbody>
</table>
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
<p>Panel Body</p>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.panel-group -->
</div>
<!-- /.col-lg-12 -->
</div>
<button id="Continue" class="btn btn-primary hidden disabled"><a href="AddSupplier-SubmitReq.aspx" style="color:white">Continue to Set-Up<i class="fa fa-arrow-right" aria-hidden="true"></i></a></button>Hope this helps.