• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 46
  • Last Modified:

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

0
digitalwise
Asked:
digitalwise
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now