• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 322
  • Last Modified:

JQUERY: Find .html page name index location in accordion

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
detox1978
Asked:
detox1978
1 Solution
 
leakim971PluritechnicianCommented:
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
 
HagayMandelCommented:
Does this help?
0
 
David S.Commented:
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
 
detox1978Author Commented:
Excellent work as ever!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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