How do invoke an already existing jquery function on an html anchor?

Question

I created expandable content using jquery on several divs with unique ids. The code is working but now I also want to trigger this function from a top navigation using an anchor. I have tried several things but nothing works. I am very new to jquery so any help would be greatly appreciated.

I am specifically trying to invoke the click() function on each anchor.

Here is my jquery:

(function($) {
    $(document).ready(function () {
        var panelspeed = 500; 
        var totalpanels = 6; 
        var defaultopenpanel = 0; 
        var accordian = true;  
        var panelheight = new Array();
        var currentpanel = defaultopenpanel;
    var iconheight = parseInt($('.icon-close-open').css('height'));
    var highlightopen = true;

    //Initialise collapsible panels
    function panelinit() {
            for (var i=1; i<=totalpanels; i++) {
                panelheight[i] = parseInt($('#cp-'+i).find('.expandable-panel-content').css('height'));
                $('#cp-'+i).find('.expandable-panel-content').css('margin-top', -panelheight[i]);
                if (defaultopenpanel == i) {
                    $('#cp-'+i).find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
                    $('#cp-'+i).find('.expandable-panel-content').css('margin-top', 0);
                }
            }
    }

    $('.expandable-panel-heading').click(function() {
        var obj = $(this).next();
        var objid = parseInt($(this).parent().attr('ID').substr(3,2));
        currentpanel = objid;
        if (accordian == true) {
            resetpanels();
        }

        if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) {
            obj.clearQueue();
            obj.stop();
            obj.prev().find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
            obj.animate({'margin-top':0}, panelspeed);
            if (highlightopen == true) {
                $('#cp-'+currentpanel + ' .expandable-panel-heading').addClass('header-active');
            }
        } else {
            obj.clearQueue();
            obj.stop();
            obj.prev().find('.icon-close-open').css('background-position', '0px 0px');
            obj.animate({'margin-top':(panelheight[objid]*-1)}, panelspeed);
            if (highlightopen == true) {
                $('#cp-'+currentpanel + ' .expandable-panel-heading').removeClass('header-active');
            }
        }
    });

    function resetpanels() {
        for (var i=1; i<=totalpanels; i++) {
            if (currentpanel != i) {
                $('#cp-'+i).find('.icon-close-open').css('background-position', '0px 0px');
                $('#cp-'+i).find('.expandable-panel-content').animate({'margin-top':-panelheight[i]}, panelspeed);
                if (highlightopen == true) {
                    $('#cp-'+i + ' .expandable-panel-heading').removeClass('header-active');
                }
            }
        }
    }

   //Uncomment these lines if the expandable panels are not a fixed width and need to resize
   $( window ).resize(function() {
      panelinit();
    });

    $(window).load(function() {
        panelinit();
    }); //END LOAD
}); //END READY

})(jQuery);

The html for the expandable jquery content is:

<div class="expandable-panel" id="cp-3">
    <div class="expandable-panel-heading">
        <h2>Testimonials<span class="icon-close-open"></span></h2>
     </div>
    <div class="expandable-panel-content">
        <p>Panel HTML...</p>
    </div>
</div>

The html anchors that I want to trigger the click() function are:

        <ul class="nav">
            <a href="#cp-1" onclick="$( "a" ).trigger( "click" );"><li class="nav">What is Justice Court Judge?</li></a>
            <a href="#cp-2"><li class="nav">About Reeves Jones</li></a>
            <a href="#cp-3"><li class="nav">Testimonials</li></a>
            <a href="#cp-4"><li class="nav">Polling Locations</li></a>
            <a href="#cp-5"><li class="nav">Map</li></a>
            <a href="#cp-6"><li class="nav">Contact</li></a>
        </ul>

Thank you in advance for your help!

Answer 1

I recommend not to use inline event handlers.

You can add the following to your jquery code:

$(".nav").find('a').trigger("click");

$(".nav").find('a').click(function(){
    //your code
})

Answer 2

If I understand correctly, you don't want to trigger the click event for the anchors, but instead you want to trigger the click event of the corresponding navigation element when an anchor is clicked.

You can do that by adding the following code inside your document-ready function:

$('.nav a').click(function() {
    $($(this).attr('href')).find('.expandable-panel-heading').click();
});

This code registers a click handler on all the <a> elements inside the .nav element. It uses the href value of the clicked <a> element to get a jQuery object representing the navigation element.

In this case, you should not place the "onclick" attribute on the <a> elements.

BTW: For valid HTML, you should nest the <a> elements inside the <li> elements, not the other way around.