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

Question

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.

Upvotes: 0

Views: 219

Answer 1

If you want the function to be triggered when both the classes are present,

you use

$(".fnAccordion .fnTrigger").click(function(){

//Your code here

});

If you want the function to get triggered when element of either class is clicked, use a "," to separate the classes.

$(".fnAccordion, .fnTrigger").click(function(){

//Your code here

});

Answer 2

Your check only checks for the fnTrigger class INSIDE an element with the class fnAccordion

$(".fnAccordion .fnTrigger").click(function(e){});

Is your button inside the element with the class fnAccordion?