Question posted in 
I am trying to hide a button until all required elements on the page have been clicked. I found how to hide an element until one item is clicked but not sure how to set this to hide the button until all items are clicked.
The elements I want the users to click on are accordion panels with the ID’s as “collaspeone”, “collaspetwo” and so on. I want the user to click on each panel (which causes them to expand) then once they have clicked on each panel, show a button on the bottom of the page which allows them to continue to the next page.
Here is the element I want to show only when every panel has been clicked on.
<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>
Here is my full HTML code
<!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>
3
Answers
The easiest way I can think of is to keep track of the clicked elements.
If the array you’re keeping track of is the same length as the number of elements to click, display the nutton.
Add
href(It is different for each panel) on click of a panel inside an accumulator, when its length reaches5display your button.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.
Hope this helps.