Link to home
Start Free TrialLog in
Avatar of smitty62
smitty62Flag for United States of America

asked on

Use javascript to open specific place on an accordian in other page

http://insurance.illinois.gov/defaultnew.html

I want to be able to click on the "Tax Forms" under the "Companies" dropdown menu (which is an include) and have it go to the below page with the accordion open to the tax forms part of the accordion.  In other words, how do I use javascript to go to an anchor on another page with the correct expanded selection.

http://insurance.illinois.gov/Company/CompanyMain.html
Avatar of Michael Vasilevsky
Michael Vasilevsky
Flag of United States of America image

You'll want to do two things:

1. Include your anchor in the href:
<a href="http://insurance.illinois.gov/Company/CompanyMain.html#collapse04" title="Tax Forms">Tax Forms</a>

Open in new window

2. Use javascript to uncollapse the accordian, e.g. with jQuery:
$( "#collapse04" ).addClass( "in" )

Open in new window


Hope this helps!

MV
Avatar of smitty62

ASKER

I understand the link, however, I don't understand where or how to setup the code of the second line.  In classic asp you use the request command to bring in the data.  Do I use an "onload=JavaScript:xxxxxxxx();" command in the body tag?
There's many ways to do it. I would start with checking the URL on page ready using the jQuery ready function:

$( document ).ready(function() {
  var myURL = window.location.href;
  if (myURL.substring(myURL.length - 10, myURL.length) == '#collapse04') {
    $( "#collapse04" ).addClass( "in" );  
  }
});

Open in new window


but sure to reference jQuery if you're not already:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Open in new window

Is it something like:

<script language="javascript" type="text/javascript">
  function getSelected()
     $( "#collapse04" ).addClass( "in" )
</script>

Open in new window



<body onload="javascript:getSelected();">

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Michael Vasilevsky
Michael Vasilevsky
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sorry, I responded without seeing what you wrote.  Yes, I do have the jquery.min.js already referenced.  Give me a few minutes to play with this a little and see if I can get what you suggested to work.
GOT IT!!!  The length just needed to be increased by one for the "#" charater.

<script language="javascript" type="text/javascript">
  $( document ).ready(function() {
  var myURL = window.location.href;
  if (myURL.substring(myURL.length - 11, myURL.length) == '#collapse04') {
    $( "#collapse04" ).addClass( "panel-collapse collapse [b]active[/b]" );  
  }
});
</script>

Open in new window

It's working now.  Thank you!