php - How to call a jQuery function on click event in the following scenario? -
i'm using php, smarty , jquery website. there functionality of showing , hiding
<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 functionality of hide/show working fine when click on following 2 elements:
<a class="fntrigger" href="#">practice sheet basic details <span></span></a> <a class="fntrigger" href="#">select category <span></span></a> actually want make functionality work on continue button(following html code snippet it):
<input type="button" name="continus" id="continus" value="continue" id="" name=""> i tried make work on continue button applying class fntrigger didn't work. can me in regard? in advance.
if want function triggered when both classes present,
you use
$(".fnaccordion .fntrigger").click(function(){ //your code here }); if want function triggered when element of either class clicked, use "," separate classes.
$(".fnaccordion, .fntrigger").click(function(){ //your code here });
Comments
Post a Comment