Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

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)

2012-01-23

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>

2012-01-23

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!

2012-01-23

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

2012-01-23

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/

2012-01-23

Jerson Baguio answers:

try this


jQuery('.accordion-title:first').click();


Jerson Baguio comments:

oh julio potier is fast

2012-01-23

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);