?
Solved

JQUERY:  Find .html page name index location in accordion

Posted on 2013-01-28
4
Medium Priority
?
316 Views
Last Modified: 2013-01-30
I have a PHP script that dynamically creates the accordion menu below... demo here


<ul id="accordion">
  <li><a href="home.html"  class="heading  href_accordion_works" >Home </a></li>
  <li><a href="#"  class="heading " >Industrial Cleaning 
    <!--[if IE 7]><!--></a><!--<![endif]-->
    
    <ul>
      <li><a href="tankcleaning.html"  class=" href_accordion_works" >Tank Cleaning </a></li>
      <li><a href="draininterceptorcleaning.html"  class=" href_accordion_works" >Drain and Interceptor Cleaning </a></li>
      <li><a href="highpressurewaterjetting.html"  class=" href_accordion_works" >High Pressure Water Jetting </a></li>
      <li><a href="gasfreecertification.html"  class=" href_accordion_works" >Gas Free Certification </a></li>
      <li><a href="generalonsitecleaning.html"  class=" href_accordion_works" >General Onsite Cleaning </a></li>
    </ul>
  </li>
  <li><a href="#"  class="heading " >Transportation 
    <!--[if IE 7]><!--></a><!--<![endif]-->
    
    <ul>
      <li><a href="fleet.html"  class=" href_accordion_works" >List and pictures of all vehicles in fleet </a></li>
    </ul>
  </li>
  <li><a href="wastedisposalrecycling.html"  class="heading " >Waste Disposal and Recycling 
    <!--[if IE 7]><!--></a><!--<![endif]-->
    
    <ul>
      <li><a href="hazardouswastedisposalandrecycling.html"  class=" href_accordion_works" >Hazardous Waste Disposal and Recycling </a></li>
      <li><a href="nonhazardouswastedisposalandrecycling.html"  class=" href_accordion_works" >Non Hazardous Waste Disposal and Recycling </a></li>
      <li><a href="laboratorytestingfacilitiesforwastes.html"  class=" href_accordion_works" > Laboratory testing facilities for wastes </a></li>
    </ul>
  </li>
  <li><a href="#"  class="heading " >Mobile De-Watering Equipment 
    <!--[if IE 7]><!--></a><!--<![endif]-->
    
    <ul>
      <li><a href="plateandframefilterpressunits.html"  class=" href_accordion_works" > Plate and Frame Filter Press Units </a></li>
      <li><a href="centrifugeunits.html"  class=" href_accordion_works" >Centrifuge Units </a></li>
      <li><a href="beltpresses.html"  class=" href_accordion_works" > Belt Presses </a></li>
      <li><a href="sludgethicknerclarificationunits.html"  class=" href_accordion_works" >Sludge Thickner / Clarification Units </a></li>
    </ul>
  </li>
  <li><a href="#"  class="heading " >Bespoke Solutions 
    <!--[if IE 7]><!--></a><!--<![endif]-->
    
    <ul>
      <li><a href="plantforonsitecustomerneeds.html"  class=" href_accordion_works" > Plant for OnSite Customer Needs </a></li>
      <li><a href="nicherecoveryoptionsforexistingwastes.html"  class=" href_accordion_works" >Niche recovery options for existing wastes </a></li>
      <li><a href="specialistplantfordisposalcostreduction.html"  class=" href_accordion_works" >Specialist plant for disposal cost reduction </a></li>
      <li><a href="designandbuildofbespokesolutions.html"  class=" href_accordion_works" >Design and build of bespoke solutions </a></li>
    </ul>
  </li>
  <li><a href="#"  class="heading " >Case Studies 
    <!--[if IE 7]><!--></a><!--<![endif]-->
    
    <ul>
      <li><a href="examplesofexistingcasestudies.html"  class=" href_accordion_works" >Examples of existing case studies </a></li>
    </ul>
  </li>
</ul>

Open in new window



I can set which menu is open (active) via eq(1) below.

$('#accordion').accordion({ active: '.heading:eq(1)' })

Open in new window


Is there an easy way to work out what menu should be open?

I can provide the pagename via PHP code, so dont need to work that out.  Just it's parent index position within the accordion.

var pagename = 'tankcleaning.html';

Open in new window



Is there an easy way to take tankcleaning.html and find it's parent location so I can set it as active?



Many thanks in adv

D
0
Comment
Question by:detox1978
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 38830600
try :


$(window).load(function() {  $("#full-background").fullBg();
  var pagename = 'tankcleaning.html'; // set with php <?php echo $pagename; ?>
  $('#accordion').accordion();
  $("a[href='" + pagename + "']").closest("li.ui-accordion-group").find("a.ui-accordion-header").trigger("click")
  $('.href_accordion_works').click(function() {
    window.location = $(this).attr('href');
    return false;
  });
});

Open in new window

0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38830603
Does this help?
0
 
LVL 42

Expert Comment

by:David S.
ID: 38833226
Try this:
var curItem = $('#accordion a[href*="'+pagename+'"]').parents('li').eq(1);
$('#accordion>li').each(function(idx){
	if($(this).is(curItem)) $('#accordion').accordion( "option", "active", idx );
});

Open in new window


Are you aware that your code is broken in IE8 and IE9 because of the conditional comments? I assume they were part of a hack to support IE6 at some point. Simply replace each
<!--[if IE 7]><!--></a><!--<![endif]-->

Open in new window

with
</a>

Open in new window

0
 
LVL 2

Author Closing Comment

by:detox1978
ID: 38835025
Excellent work as ever!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question