How to call a jQuery function on click event in the following scenario?

How to call a jQuery function on click event in the following scenario?

I'm using PHP, Smarty and jQuery for my website. There is a functionality
of showing and hiding an
element on a form. The HTML as well as code from jQuery function is as
below: HTML Code:
<div class="c-mega-accord">
<ol class="fnAccordion">
<li>
<a class="fnTrigger" href="#">Practice Sheet Basic Details
<span></span></a>
<div class="fnAccContent">
<div class="c-grad-box">
<div class="form-wrapper">
{if $error_msg}<div
class="error-info">{$error_msg.error_msgs}</div>{/if}
<form name="manage_practice_sheet" id="manage_practice_sheet"
action="practice_sheet.php" method="post">
<input type="hidden" name="op" id="op" value="{$op}" />
<input type="hidden" name="sheet_type" id="sheet_type"
value="{$sheet_type}" />
<input type="hidden" name="form_submitted" id="form_submitted"
value="yes" />
<input type="hidden" name="practice_sheet_id"
id="practice_sheet_id" value="{$practice_sheet_id}" />
<input type="hidden" name="hidden_practice_sheet_category_id"
id="hidden_practice_sheet_category_id"
value="{$practice_sheet_category_id}" />
<input type="hidden" name="practice_sheet_id"
id="practice_sheet_id" value="{$practice_sheet_id}" />
<p class="form-info fl-right">* Mandatory fields</p>
<ul>
<li>
<label>{'Category'|signal_on_error:$error_msg:'practice_sheet_category_id'}<span
class="reqd">*</span></label>
<div class="form-element">
<select name="practice_sheet_category_id"
id="practice_sheet_category_id"
<!--onChange="get_subcategory_by_category('{$control_url}modules/category/manage_category.php',
this.value, 'get_subcategory_by_category',
'#practice_sheet_sub_category_id');"--> >
<option value="">Select</option>
{if $all_parent_categories}
{foreach from=$all_parent_categories
item="parent_category"}
<option value="{$parent_category.category_id}" {if
$data.practice_sheet_category_id==$parent_category.category_id
||
$practice_sheet_category_id==$parent_category.category_id}
selected="selected"{/if}>{$parent_category.category_name}</option>
{/foreach}
{/if}
</select>
</div>
</li>
<li>
<label>{'Practice Sheet
Name'|signal_on_error:$error_msg:'practice_sheet_name'}<span
class="reqd">*</span></label>
<div class="form-element">
<input class="" type="text"
name="practice_sheet_name"
id="practice_sheet_name"
value="{$data.practice_sheet_name}"
maxlength="50">
</div>
</li>
<li>
<label>Display Date</label>
<div class="form-element">
<input type="text" class="cal fl-left" id="frmDate"
name="frmDate" value="{if
$data.practice_sheet_display_date !='0' &&
$data.practice_sheet_display_date
!=''}{$data.practice_sheet_display_date}{/if}">
</div>
</li>
<li>
<label>Practice Sheet For</label>
<div class="form-element">
<input class="" type="text" name="practice_sheet_for"
id="practice_sheet_for" value="{$data.practice_sheet_for}"
maxlength="50">
</div>
</li>
<li>
<label></label>
<div class="form-element">
<!--<input type="submit" value="{$submit_value}"
class="c-btn" id="saveAddMore" name="submit">
<input type="button" value="{$cancel_value}"
class="c-gray-btn" id="done" name="done"
onclick="javascript:window.location.href='{$control_url}modules/practice_sheet/practice_sheet.php?op={$query_string}'"><br/>-->
<span class="c-btn c-continus-btn"><input type="button"
name="continus" id="continus" value="Continue" id=""
name=""></span>
<span class="c-gray-btn c-cancel-btn"><input type="button"
value="Cancel" id="" name=""></span>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</li>
<li>
<a class="fnTrigger" href="#">Select Category <span></span></a>
<div class="fnAccContent">
<div class="c-grad-box">
</div>
</div>
</li>
</ol>
</div>
jQUery Code:
function accordion(){
var li = $(".fnAccordion > li");
li.eq(0).addClass("active");
li.children('.fnAccContent').not(':first').hide();
$(".fnAccordion .fnTrigger").click(function(e){
e.preventDefault();
var numLi = $(this).parent('li').siblings();
if(numLi.length > 0){
$(this).parent('li').siblings().removeClass("active");
var curState =
$(this).parent().find(".fnAccContent").css("display");
if(curState == "none"){
$(".fnAccContent").slideUp();
$(this).parent().addClass("active");
$(this).parent().find(".fnAccContent").slideDown();
}
}else{
$(this).parent('li').toggleClass("active");
$(this).parent().find(".fnAccContent").slideToggle();
}
})
}
$(document).ready(function(){
accordion();
})
Now the functionality of hide/show is working fine when I click on
following two elements:
<a class="fnTrigger" href="#">Practice Sheet Basic Details <span></span></a>
<a class="fnTrigger" href="#">Select Category <span></span></a>
Actually I want to make this functionality work on Continue
button(following is the HTML code snippet for it):
<input type="button" name="continus" id="continus" value="Continue" id=""
name="">
I tried to make it work on Continue button by applying the class fnTrigger
but it didn't work. Can you help me in this regard? Thanks in advance.