Question

I created a accordion shortcode for wordpress and works fine until there is only one accordion one the page…

Here is the problem http://panel.daweb.cz/?page_id=119

Accordions are at bottom of page one works fine but second one does not. I am using jQuery jquery-ui.js for accordion effect (http://jqueryui.com/demos/accordion/).

Does someone know how to fix it or where is really good tutorial how to do accordion shortcode for wp?

Thanks for your time

Answer 1

In your JavaScript file otherjs.js you have this code at the bottom

// Load accordion   
$(function() {
    $( "#accordion" ).accordion();
    $('.flexslider').flexslider();  
});

Both your accordians have the ID of ‘accordion’. Two items on the same page should not have the same ID as they must be unique and this means jQuery will only be setting the first accordion it finds up.

What you need to do is give your first accordion the ID of accordion1 and the second accordion2 then change your JavaScript in otherjs.js to this:

// Load accordion   
$(function() {
    $( "#accordion1" ).accordion();
    $( "#accordion2" ).accordion();
    $('.flexslider').flexslider();  
});

Alternatively you could get rid of the ID for both your accordions and give them the class accordion then you’d use this code to load the accordions:

// Load accordion   
$(function() {
    $( ".accordion" ).accordion();
    $('.flexslider').flexslider();  
});