Accordion and moving tabs up the page

Hello,

Please share your site url so that we can review this issue in your site and help you to fix this.

I ended up using jQuery UI accordion and it’s working great.

Thank you though, I appreciate it!
Ben

Hey @benjaminblue would you mind sharing how you went about using jQuery UI?

Hi 63N, I don’t mind at all – I will try to later today. I need to go take a closer look in that project to remember exactly what I did, but I will and post it!

Hi all,

@benjaminblue Did you succeed with this?
I have the same problem, when tabs are moved from their default position to under description, the accordion is displayed correctly in the old tabs position but the old tabs are being displayed duplicated in the single_product_summary position.
So we end up with both accordion tabs and default tabs in 2 positions.

Theme: OceanWP

Any help/ideas?

@daniel-mesteru and @63n (63N I’m sorry I never got back to you like I said I would. I definitely know first-hand about searching everywhere for solutions to tough problems, and how often another’s post saves me.)

So, I am looking at this project which I haven’t in a while, and it looks like I

in functions.php of my child theme (Avada in my case) I enqueued these jQuery UI files (downloaded from jQuery – just google jQuery UI) and a

// jQuery accordion - product single page
function product_accordion()
{
    if ((is_product()) || (is_archive())){

        wp_enqueue_style('jquery-ui', get_stylesheet_directory_uri() . '/css/jquery-ui.css', 10);
        
        wp_register_script('jquery-core', get_stylesheet_directory_uri() . 'https://code.jquery.com/jquery-1.8.2.js', array('jquery'), '1.0', true);
        wp_enqueue_script('jquery-core');
        
        wp_register_script('jquery-ui', 'https://code.jquery.com/ui/1.9.0/jquery-ui.js', array('jquery'), '1.0', true);
        wp_enqueue_script('jquery-ui');
        /*
 * @source https://jqueryui.com/accordion/#no-auto-height
 */
// alert("accordion-snippet.js start");

      jQuery('#accordion').accordion({ 
            collapsible:true, 
            active:false, 
            autoHeight: false, 
            disabled:true,
            heightStyle: "content"
      });
      // alert("#accordion').accordion({...}); executed");

      jQuery('#accordion h3.ui-accordion-header').click(function(){
            jQuery(this).next().slideToggle();
      });
      
      jQuery('.accordion-expand-all').click(function(){
            jQuery('#accordion h3.ui-accordion-header').next().slideDown();
      });
      // alert("accordion-snippet.js loaded");

wp_register_script(‘accordion-snippet’, get_stylesheet_directory_uri() . ‘/js/accordion-snippet.js’, array(‘jquery’), ‘1.0’, true);
wp_enqueue_script(‘accordion-snippet’);

}
}
add_action(‘wp_enqueue_scripts’, ‘product_accordion’);`

the accordion-snippet file has:

/*
 * @source https://jqueryui.com/accordion/#no-auto-height
 */
// alert("accordion-snippet.js start");

      jQuery('#accordion').accordion({ 
            collapsible:true, 
            active:false, 
            autoHeight: false, 
            disabled:true,
            heightStyle: "content"
      });
      // alert("#accordion').accordion({...}); executed");

      jQuery('#accordion h3.ui-accordion-header').click(function(){
            jQuery(this).next().slideToggle();
      });
      
      jQuery('.accordion-expand-all').click(function(){
            jQuery('#accordion h3.ui-accordion-header').next().slideDown();
      });
      // alert("accordion-snippet.js loaded");

And this removes product tabs from original position and puts them next to product image:

/**
 * @snippet       Move product tabs beside the product image - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=393
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.5.2
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60);

I’m pretty sure that covers it, but I might have missed something. It ended up being somewhat complicated…but doable! There is a possibility i could have hidden any duplicate set of something via CSS, but hopefully I didn’t and got it done cleaner.

Let me know if either of you need more and I’ll take a closer look. Also if inspecting the page might help, you can see it here: https://levelupnowyou.com/product/womens-survivor-racerback-tank/

Thanks.

Oh I see @benjaminblue ! So you’re not using this plugin or the WooCommerce inbuilt functionality at all, you’re just loading jQuery accordion and creating the tabbed content yourself?

@63n Yes! I started with this plugin, and eventually ran into a block. I don’t remember what it was though but I did end up downloading jQuery UI and doing the other tweaks I mentioned.

Hello,

I am looking in to the solution you provided here. But I am getting error while saving in functions.php file.

Should I copy all of it and save on functions.php file

function product_accordion()
{
    if ((is_product()) || (is_archive())){

        wp_enqueue_style('jquery-ui', get_stylesheet_directory_uri() . '/css/jquery-ui.css', 10);
        
        wp_register_script('jquery-core', get_stylesheet_directory_uri() . 'https://code.jquery.com/jquery-1.8.2.js', array('jquery'), '1.0', true);
        wp_enqueue_script('jquery-core');
        
        wp_register_script('jquery-ui', 'https://code.jquery.com/ui/1.9.0/jquery-ui.js', array('jquery'), '1.0', true);
        wp_enqueue_script('jquery-ui');
        /*
 * @source https://jqueryui.com/accordion/#no-auto-height
 */
// alert("accordion-snippet.js start");

      jQuery('#accordion').accordion({ 
            collapsible:true, 
            active:false, 
            autoHeight: false, 
            disabled:true,
            heightStyle: "content"
      });
      // alert("#accordion').accordion({...}); executed");

      jQuery('#accordion h3.ui-accordion-header').click(function(){
            jQuery(this).next().slideToggle();
      });
      
      jQuery('.accordion-expand-all').click(function(){
            jQuery('#accordion h3.ui-accordion-header').next().slideDown();
      });
      // alert("accordion-snippet.js loaded");