CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-accordion
thatidiotguy
thatidiotguy

Reputation: 8971

JQuery Accordion Anchor Functionality

I am attempting to add the following behavior to JQuery Accordion:

1) Activate a section of the accordion based on internal page links (#section1). This means if the user goes to URL mypage.com/page.php#test that I would use JS to activate that accordion section.

2) Make the headings of each section of the accordion copyable links to the url that would activate said section of the accordion. So if a user right clicks on the "section title" of the accordion and copied the link location it would put mypage.com/page.php#test on the users' clipboard.

I have 1) figured out, but it is code of my own writing. I was messing around with the navigation:true option but was not having any luck. If someone would care to point me in the right direction I would prefer using the author's code to my own, but if not, no biggie as this is completed.

2) is where I am at a loss. It seems that JQuery accordion is binding code to clicking events anywhere in the header of the accordion section. This seems to make it impossible to give the user the copy link location functionality I would like.

My HTML:

<div id="accordion">
   <article class="std_page_content">
    <h3><a id="#test">Test</a></h3>
    <div>
       test
    </div>
   </article>
   .....additional accordion sections....
</div>

My Javascript:

$("#accordion").accordion({header : "h3", heightStyle : "content", /*Allows full collapse*/collapsible: true, /*collapses sections*/ active:false, navigation:true});

var theUrl = window.location.href;
var hashValue = theUrl.contains("#") ? theUrl.split('#')[1] : null;

if(hashValue != null)
{
    //open the corresponding accordion section
}

Upvotes: 1

Views: 5175

Answers (1)

Jeff-Meadows
Jeff-Meadows

Reputation: 2184

Just give your anchor tags an href attribute:

<h3><a id="#test" href="#test">Test</a></h3>

Update: If you'd like the link to cover the entire accordion header, you can put the <h3> tag inside the anchor tag, as shown here: http://jsfiddle.net/3tGYB/1/

<div id="accordion">
  <article class="std_page_content">
    <a id="#test" href="#test" class="header"><h3>Test</h3></a>
    <div>
      test
    </div>
  </article>
</div>

And of course change your javascript:

$("#accordion").accordion({header : "a.header" /*plus other options*/});

Upvotes: 1

Related Questions