I am trying to open an accordion based on a link i send to the page
This is my url
services.html#branding
I am using the following code in the head:
<script type="text/javascript">
$(document).ready(function(){
$('#accordion').accordion({collapsible: true, animated: 'slide', autoHeight: false, navigation: true, active : 'false'});
});
</script>
And the accordion looks like:
<div id="accordion">
<h3 id="branding"><a href="#">Branding</a></h3>
<div>
<p>Does your business have a</p>
</div>
<h3><a href="#print">Print</a></h3>
<div>
<p>Brochures</a></p>
</div>
</div>
Any help would be greatly appreciated... http://docs.jquery.com/UI/Accordion
Oh I see Jeff reported that the current UI version is broken, but I actually had a solution using the current version...
HTML
<div id="accordion">
<h3><a href="#branding">Branding</a></h3>
<div>
<p>Does your business have a</p>
</div>
<h3><a href="#print">Print</a></h3>
<div>
<p>Brochures</p>
</div>
</div>
Script
$(function(){
$('#accordion').accordion({
collapsible: true,
animated: 'slide',
autoHeight: false,
navigation: true
});
// open content that matches the hash
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('#accordion').find('a[href*='+ thash + ']').closest('h3').trigger('click');
})
I used a[href$=...]
originally, but changed it to a[href*=...]
... either will work
Update: the navigation
option was removed from jQuery UI 1.10.0, so use this method:
CSS
.accordion {
position: relative;
}
.accordion .accordion-link {
position: absolute;
right: 1%;
margin-top: 16px;
z-index: 1;
width: 12px;
height: 12px;
background: url(link.png) center center no-repeat; /* approx 12x12 link icon */
}
Script
var hashId = 0,
$accordion = $('#accordion');
if (window.location.hash) {
$accordion.children('h3').each(function(i){
var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
this.id = txt;
if (txt === window.location.hash.slice(1)) {
hashId = i;
}
});
}
$accordion.accordion({
active: hashId,
animate: false,
heightStyle: 'content',
collapsible: true,
create: function( event, ui ) {
$accordion.children('h3').each(function(i){
$(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
});
$accordion.find('.accordion-link').click(function(){
$accordion.accordion( "option", "active", $(this).data('index') );
});
}
});
The bad news is that the accordion plugin is currently broken (as of 1.7.2, which you can see from ticket #4653). The good news is that it's fixed, and you can already grab the latest version here - but beware, it isn't a stable release yet!
If you use the 1.8.1 code, the navigation feature works again. Setting navigation: true
will direct accordion to automatically open the correct panel when you browse to a url that matches your navigation fragment (so that your example would work: services.html#branding
).
I think you also want to add the missing identifier to your branding anchor tag, like this:
<h3 id="branding"><a href="#branding">Branding</a></h3>
Finally, you may want to use the technique described here to update your page's url to reflect which accordion panel has been clicked without reloading your page.
Easiest way to do this is using focusin.
$(function() {
$( "#accordion" ).accordion({
event: "focusin"
});
});
<div id="accordion">
<h3 id="section-1">Section 1</h3>
<div>
<p>blaa </p>
</div>
<h3 id="section-2">Section 2</h3>
<div>
<p>bla</p>
</div>
you can href from the same page or from a different page simply by doing
<a href "otherpage.html#section-1">click to go to section 1</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With