Page Accordian - first accordian opened WordPress
- SOLVED
Hello, I have successfully installed and styled a page accordion plugin into my wordpress site.
This is the plugin I am using:
http://patrick.forringer.com/2011/04/wordpress-content-accordion/
And you can see it working here:
http:// (www) popcorndigital (.co.uk) reformis/expertise/
My question is, how can I set the first accordion tab to show opened/expanded when the page is loaded?
- I will also double the question fee $ if someone can tell me how to add link anchors to each of the accordion tabs. I tried adding the standard <a name="link1"></a> within the [accordion] tags but it broke the accordion function.
for example when you click the 'Business Intelligence' link in the menu it would auto expand 'Business Intelligence' accordion.
Thanks
Answers (6)
Julio Potier answers:
Hello Ross
Do you have a .js file or something like that in which you can add hyour own javascript code ?
Here the code :
jQuery('.accordion-title:first').click();
FOr the 2nd, i'm thinking ...
Ross Gosling comments:
This is the plugin's .js file, where should I add that?
(function($){
$(document).ready(function(){
$('a[data-accordion-group]').each(function(){
var $myself = $(this).css('display','block');
var my_group = $myself.data('accordion-group');
var $my_content = $myself.next('.accordion-content');
// fixe slide jitter by giving width
$my_content.width( $my_content.parent().width() ).hide();
$myself.click(function(){
// find everyone in my group and trigger compact.
$('a[data-accordion-group='+my_group+']').not($myself).trigger('compact');
if($myself.hasClass('down'))
$myself.trigger('compact');
else
$myself.trigger('expand');
return false;
}).bind('expand',function(){
$my_content.slideDown();
$myself.addClass('down');
}).bind('compact',function(){
$my_content.slideUp();
$myself.removeClass('down');
});
});
});
})(this.jQuery);
Julio Potier comments:
Here comes
(function($){
$(document).ready(function(){
$('a[data-accordion-group]').each(function(){
var $myself = $(this).css('display','block');
var my_group = $myself.data('accordion-group');
var $my_content = $myself.next('.accordion-content');
// fixe slide jitter by giving width
$my_content.width( $my_content.parent().width() ).hide();
$myself.click(function(){
// find everyone in my group and trigger compact.
$('a[data-accordion-group='+my_group+']').not($myself).trigger('compact');
if($myself.hasClass('down'))
$myself.trigger('compact');
else
$myself.trigger('expand');
return false;
}).bind('expand',function(){
$my_content.slideDown();
$myself.addClass('down');
}).bind('compact',function(){
$my_content.slideUp();
$myself.removeClass('down');
});
});
$('a[data-accordion-group]:first').click();
});
})(this.jQuery);
i modified the selector, i keep the same used in the plugin code :
$('a[data-accordion-group]:first').click();
Ross Gosling comments:
Thank you Julio, this is working!!
Julio Potier comments:
For the nd, i added this :
$('ul.ssf-blue li').slice(3,4).find('a').(click(function(e){
var $text = $(this).text();
$('a[data-accordion-group]:contains( ' + $text + ' )').click();
e.preventDefault();
});
Full code :
$(document).ready(function(){
$('a[data-accordion-group]').each(function(){
var $myself = $(this).css('display','block');
var my_group = $myself.data('accordion-group');
var $my_content = $myself.next('.accordion-content');
// fixe slide jitter by giving width
$my_content.width( $my_content.parent().width() ).hide();
$myself.click(function(){
// find everyone in my group and trigger compact.
$('a[data-accordion-group='+my_group+']').not($myself).trigger('compact');
if($myself.hasClass('down'))
$myself.trigger('compact');
else
$myself.trigger('expand');
return false;
}).bind('expand',function(){
$my_content.slideDown();
$myself.addClass('down');
}).bind('compact',function(){
$my_content.slideUp();
$myself.removeClass('down');
});
});
$('a[data-accordion-group]:first').click();
$('ul.ssf-blue li').slice(3,4).find('a').(click(function(e){
var $text = $(this).text();
$('a[data-accordion-group]:contains( ' + $text + ' )').click();
e.preventDefault();
});
});
})(this.jQuery);
<em>ps : i think that the designchemical (sorry dude) code will be executed for each link of the menu, always, and because of the loop is not optimized, try mine, if not working, just a quick fix or i can code it directly in your file to be faster ;)
ps2 : Jerson : yes i am, take care to avoid posting the same answer 7mn later ;)</em>
designchemical answers:
Here's the code to open the accordion when the main menu is clicked:
jQuery(document).ready(function($){
$('.ssf-blue li a').click(function(e){
var tm = $(this).text();
$('.accordion-title').each(function(){
var th = $(this).text();
if(tm == th){
$(this).addClass('down').next('.accordion-content').slideDown();
}
});
e.preventDefault();
});
});
Ross Gosling comments:
Hello designchemical, for the other $15 can you show me how to get this working, can it be added to the .js that Julio edited for me above?
designchemical comments:
Hi,
You can but that will get overwritten if the plugin updates. If you want to add to the same file use:
(function($){
$(document).ready(function(){
$('a[data-accordion-group]').each(function(){
var $myself = $(this).css('display','block');
var my_group = $myself.data('accordion-group');
var $my_content = $myself.next('.accordion-content');
// fixe slide jitter by giving width
$my_content.width( $my_content.parent().width() ).hide();
$myself.click(function(){
// find everyone in my group and trigger compact.
$('a[data-accordion-group='+my_group+']').not($myself).trigger('compact');
if($myself.hasClass('down'))
$myself.trigger('compact');
else
$myself.trigger('expand');
return false;
}).bind('expand',function(){
$my_content.slideDown();
$myself.addClass('down');
}).bind('compact',function(){
$my_content.slideUp();
$myself.removeClass('down');
});
});
$('a[data-accordion-group]:first').click();
$('.ssf-blue li a').click(function(e){
var tm = $(this).text();
$('.accordion-title').each(function(){
var th = $(this).text();
if(tm == th){
$(this).addClass('down').next('.accordion-content').slideDown();
}
});
e.preventDefault();
});
});
})(this.jQuery);
Ross Gosling comments:
Thank you Designchemical, your code is the closest so far, upon click the accordions expand but the other accordions do not close as they did before. Is there a way to get that function back?
Thank you.
designchemical comments:
(function($){
$(document).ready(function(){
$('a[data-accordion-group]').each(function(){
var $myself = $(this).css('display','block');
var my_group = $myself.data('accordion-group');
var $my_content = $myself.next('.accordion-content');
// fixe slide jitter by giving width
$my_content.width( $my_content.parent().width() ).hide();
$myself.click(function(){
// find everyone in my group and trigger compact.
$('a[data-accordion-group='+my_group+']').not($myself).trigger('compact');
if($myself.hasClass('down'))
$myself.trigger('compact');
else
$myself.trigger('expand');
return false;
}).bind('expand',function(){
$my_content.slideDown();
$myself.addClass('down');
}).bind('compact',function(){
$my_content.slideUp();
$myself.removeClass('down');
});
});
$('a[data-accordion-group]:first').click();
$('.ssf-blue li a').click(function(e){
var tm = $(this).text();
$('.accordion-title').each(function(){
var th = $(this).text();
if(tm == th){
$('.accordion-content').slideUp();
$('.accordion-title').removeClass('down');
$(this).addClass('down').next('.accordion-content').slideDown();
}
});
e.preventDefault();
});
});
})(this.jQuery);
designchemical comments:
Nothing like optimizing someone else's answer and then offering if it doesnt work to do quick fix via the back-end
excellent!
Fahad Murtaza answers:
I am on it. It needs a jQuery simulation which clicks the first one on load.
Fahad Murtaza comments:
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[data-accordion-group]:first').bind('click', function() {
$(this).addClass('down').next('.accordion-content').slideDown();
});
//$(".rightcontent").find("a").parent().css('background-color','yellow');
$('a[data-accordion-group]:first').trigger('click');
});
</script>
In the footer and it should work
rizaljohn answers:
Just set the active to 0, just like this:
jQuery('.accordion').accordion({active: 0, autoHeight: false, collapsible: true});
rizaljohn comments:
Since that plugin using shortcode, you can try this:
[accordions active=0 event="click" autoheight=true]
Ross Gosling comments:
Found out that on the plugin page, the user is not using the same accordion plugin, but he is using this one: http://wordpress.org/extend/plugins/wp-ui/
Jerson Baguio answers:
try this
jQuery('.accordion-title:first').click();
Jerson Baguio comments:
oh julio potier is fast
Christianto answers:
Hi Ross,
For your second problem which you want to open certain accordion element when you visit link on menu like:
http://www.popcorndigital.co.uk/reformis/expertise/#FrontOffice
please use my code below, I think it will work for your 4 accordion:
(function($){
$(document).ready(function(){
$('a[data-accordion-group]').each(function(){
var $myself = $(this).css('display','block');
var my_group = $myself.data('accordion-group');
var $my_content = $myself.next('.accordion-content');
// fixe slide jitter by giving width
$my_content.width( $my_content.parent().width() ).hide();
$myself.click(function(){
// find everyone in my group and trigger compact.
$('a[data-accordion-group='+my_group+']').not($myself).trigger('compact');
if($myself.hasClass('down'))
$myself.trigger('compact');
else
$myself.trigger('expand');
return false;
}).bind('expand',function(){
$my_content.slideDown();
$myself.addClass('down');
}).bind('compact',function(){
$my_content.slideUp();
$myself.removeClass('down');
});
});
$('a[data-accordion-group]:first').click();
var acc_clicked = window.location.hash;
if(acc_clicked){
var target = acc_clicked.substr(1,4);
$(".accordion-title:contains('"+target+"')").click();
}
});
})(this.jQuery);