Trigger jquery with a different method

We purchased a nice template but the client is now wanting some extra features.   Right now there is a jquery script that opens and closes all of the children panels of a section.  Works great.   We start closed and then can open it.   But now the client wants to be able to trigger the open and close from a menu not tied to the panel itself.  The menu will be a simple <a href="">Approval and Execution</a> that will open that section and close the others that might be open.  I have been trying to figure it out but nothing is working.   Ideas?

The script is in an include js file

jQuery('.panel .tools .fa-chevron-up').click(function () {
        var el = jQuery(this).parents(".panel").children(".panel-body");
        if (jQuery(this).hasClass("fa-chevron-up")) {
            jQuery(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
            el.slideDown(200);
        } else {
            jQuery(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
            el.slideUp(200);
        }
    });

Open in new window


This is a sample of the section

<section class="panel">
                          <header class="panel-heading panel-homes" id="arrce">
                          Approval and Execution						
					

                              <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-up chevwhite"></a>
                            </span>
                          </header>
						  
						  
                          <div class="panel-body collapse" style="border-bottom: ##113b67 thick solid;">
                              <div class="row">
								  
								   <div class="col-lg-4">
								   <label>Date Committee Approved:</label>
							  </div>
								   <div class="col-lg-4"><input type="text" name="commapp" value="" size="10" maxlength="10" validate="date" class="form-control input-sm m-bot15 calendar"></div>
									  

							 
							  </div>
							  
							<div class="panel-body collapse higreen">
                              <div class="row">
								  
								  <div class="col-lg-3">
								   <label>Number of Contracts to be Issued:</label>
							  </div>
								  <div class="col-lg-1">
								   <input type="text" name="P_No" value="" size="5" maxlength="50" class="form-control input-sm m-bot15">
							  </div>
								   
							  </div>
								 
										
										
								 

							  <div class="row"><div class="col-lg-3"><label for="">Name of Green Certification:</label></div><div class="col-lg-3"><input type="text" name="greencert" required="no" size="50" maxlength="150" value="#getprop.greencert#" class="form-control input-sm m-bot15"></div></div>
														
		

							 					
						
								
						
					

							  </div>
								  
								  <div class="panel-body collapse">
                              <div class="row">
								  
								  <div class="col-lg-3">
								   <label>Date RCC Issued:</label>
							  </div>
								  <div class="col-lg-1">#dateformat(PHAName.rccissueddate, "mm/dd/yyyy")#
							  </div>
								   
							  </div>
								 
										
										
						
					

							  </div>
										
                      </section>

Open in new window

digitalwiseAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
This doesn't seem too difficult, though you'll need to figure out how to integrate/inject some things into your template.

Basic idea is to give your links and divs an ID attribute.  Compile those attributes into a javascript object, which you inject into your page.  When a link is clicked, check the object for a matching property.  If one exists, call your menu toggle on the element described by that property's value.  Below code is off the top of my head, and may not be 100%.  It should be enough to point you in the right direction.

var myLinks = { link1: 'menu1', link2: 'menu2' };
$(function() {
  $('body').on('click', 'a', function(e) {
    var $link = $(e.target),
         check_id = $link.attr('id');
    if (check_id in myLinks) {
      var selector = '#' . myLinks[check_id];
      // important to prevent the link from actually going anywhere
      e.preventDefault();  
      // maybe not .toggle(), but whatever you need to do here
      $(selector).toggle();
    }
  });
});

Open in new window

0
Julian HansenCommented:
Firstly your HTML is mal-formed. You have this
<div class="panel-body collapse" style="border-bottom: ##113b67 thick solid;">

Open in new window

Without a closing <div>

Then you can do this without modifying the markup of your document - there is enough information in the page to do what you need.

You appear to be using an id for the <header> sections so you can use that OR you can give your sections an id - it is up to you.

Using the first method.
HTML
Your link looks like this
<a href="#arrce" class="panel-toggle">Approval and Execution</a>

Open in new window

And your jQuery looks like this
jQuery('.panel-toggle').click(function(e) {
  e.preventDefault();
  // GET THE hash FOR THE LINK (TARGET ID)
  // FIND THE CLOSEST <section>
  // FROM THERE FIND THE .panel-body
  // AND slideToggle() IT
  jQuery(this.hash).closest('section').find('.panel-body').slideToggle();
});

Open in new window


You can see this working here

If you want to target the section directly then
<a href="#approve_and_execute">Approve and Execute</a>
<section class="panel" id="approve_and_execute">

Open in new window

In your jQuery
jQuery('.panel-toggle').click(function(e) {
  e.preventDefault();
  // GET THE hash FOR THE LINK (TARGET ID)
  // FIND THE <section> IT REFERS TO
  // FROM THERE FIND THE .panel-body
  // AND slideToggle() IT
  jQuery(this.hash).find('.panel-body').slideToggle();
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Pravin AsarPrincipal Systems EngineerCommented:
It is matter of adding action with button to toggle visibility of appropriate contents

Here is one if my implementation example

http://geotracker-dev.mygeopro.com

See the option to hide/show nav bar.

You can set cookie as well to maintain this behavior  across the site pages

Good Luck
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.