I have added this code into my custom js

jQuery(function($){

	$(document).ready(function(){ jump_to_tab( $, $('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"], .x-accordion-toggle a[href="#' + location.href.split("#").slice(-1)[0] + '"]') ); });
	$('.enable_jump_to').click( function(e){ e.preventDefault(); jump_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[href="' + $(this).attr('data-jump-target') + '"], .x-accordion-toggle a[href="' + $(this).attr('data-jump-target') + '"]') ); } );

});

function jump_to_tab($, tab_nav) {
			if(tab_nav.length >=1) {
	            $(tab_nav).click();
	            $('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');
        	}
}

The Accordion has an ID called “makeup” (without quotes). It is in the button area that I am unclear what to put and where. I am using Visual Composer. Does everything go into the ‘href’ input box? By everything I mean — #makeup class=”enable_jump_to” data-jump-target=”#collapse-2″ ??

I attempted this with a straight link which seems like it would be simpler but never could get it to work either.

The URL is http://www.geoffreydonnephotography.com/pricing-packages/
The Accordion element is the second one you see on the left called “Do I really need professional….” and the trigger button is on the right almost to the bottom called “Makeup & Hair”.

Thanks!
Slade

Add the JavaScript to your Customizer > Custom > JavaScript section:

jQuery(function($){

	$(document).ready(function(){ jump_to_tab( $, $('.x-nav-tabs .x-nav-tabs-item a[href="#' + location.href.split("#").slice(-1)[0] + '"], .x-accordion-toggle a[href="#' + location.href.split("#").slice(-1)[0] + '"]') ); });
	$('.enable_jump_to').click( function(e){ e.preventDefault(); jump_to_tab($, $('.x-nav-tabs .x-nav-tabs-item a[href="' + $(this).attr('data-jump-target') + '"], .x-accordion-toggle a[href="' + $(this).attr('data-jump-target') + '"]') ); } );

});

function jump_to_tab($, tab_nav) {
			if(tab_nav.length >=1) {
	            $(tab_nav).click();
	            $('html,body').animate({scrollTop: $(tab_nav).offset().top - ( $('.x-navbar').height() + 50 )},700 ,'swing');
        	}
}

Then you simply add the link/button anywhere on the page you want looking like this:

<a href="#" class="enable_jump_to" data-jump-target="#collapse-1">Jump and Open Accordion #1</a>

if you edit your button your button code would look like this:

<a class="x-btn x-btn-rounded x-btn-small enable_jump_to" data-jump-target="#collapse-1" href="#" data-toggle="none" data-placement="top" data-trigger="hover" data-options="thumbnail: ''">Makeup & Hair</a>

Thats it! Let me know if it worked.

I’m still unclear as to “where” I place the button code. Your first example looks like a simple text link and the second…looks like a text link as well but only sort-of 🙂 I am using an .x-btn (button).

When I click the pencil icon for my button…Where exactly do I place “what”? My options appear to be the href, ID, Class, and Style input boxes only. I tried to place all of that into the href but that didn’t work.

My last attempt was to use the Text editor and place the button using the X short codes. It was even more unclear where this code would go.

Sorry…

Thank you for writing in!

We’re sorry for the confusion. In such case, you cannot use button shortcode. You will need to use button HTML code as mentioned above in the Classic Mode.

However, with some custom development, you can add an attribute of data_jump_target=”” to your [button] shortcode. To do so, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that, add the following code in your child theme’s functions.php file:

// Buttons
// =============================================================================

function x_shortcode_button2( $atts, $content = null ) {
  extract( shortcode_atts( array(
    'id'               => '',
    'class'            => '',
    'style'            => '',
    'type'             => '',
    'shape'            => '',
    'size'             => '',
    'float'            => '',
    'block'            => '',
    'circle'           => '',
    'icon_only'        => '',
    'href'             => '',
    'title'            => '',
    'target'           => '',
    'info'             => '',
    'info_place'       => '',
    'info_trigger'     => '',
    'info_content'     => '',
    'lightbox_thumb'   => '',
    'lightbox_video'   => '',
    'lightbox_caption' => '',
    'data_jump_target' => ''
  ), $atts ) );

  $id    = ( $id    != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class = ( $class != '' ) ? ' ' . esc_attr( $class ) : '';
  $style = ( $style != '' ) ? 'style="' . $style . '"' : '';
  $type  = ( $type  != '' ) ? ' x-btn-' . $type : '';
  $shape = ( $shape != '' ) ? ' x-btn-' . $shape : '';
  $size  = ( $size  != '' ) ? ' x-btn-' . $size : '';
  switch ( $float ) {
    case 'left' :
      $float = ' alignleft';
      break;
    case 'right' :
      $float = ' alignright';
      break;
    default :
      $float = '';
  }
  $block            = ( $block            == 'true'  ) ? ' x-btn-block' : '';
  $icon_only        = ( $icon_only        == 'true'  ) ? ' x-btn-icon-only' : '';
  $href             = ( $href             != ''      ) ? $href : '#';
  $title            = ( $title            != ''      ) ? 'title="' . $title . '"' : '';
  $target           = ( $target           == 'blank' ) ? 'target="_blank"' : '';
  $info             = ( $info             != ''      ) ? 'data-toggle="' . $info . '"' : '';
  $info_place       = ( $info_place       != ''      ) ? 'data-placement="' . $info_place . '"' : '';
  $info_trigger     = ( $info_trigger     != ''      ) ? 'data-trigger="' . $info_trigger . '"' : '';
  $info_content     = ( $info_content     != ''      ) ? 'data-content="' . $info_content . '"' : '';
  $lightbox_thumb   = ( $lightbox_thumb   != ''      ) ? $lightbox_thumb : '';
  $lightbox_video   = ( $lightbox_video   == 'true'  ) ? ', width: 1080, height: 608' : '';
  $lightbox_caption = ( $lightbox_caption != ''      ) ? 'data-caption="' . $lightbox_caption . '"' : '';
  $data_jump_target = ( $data_jump_target != ''      ) ? 'data-jump-target="' . $data_jump_target . '"' : '';

  if ( is_numeric( $lightbox_thumb ) ) {
    $lightbox_thumb_info = wp_get_attachment_image_src( $lightbox_thumb, 'full' );
    $lightbox_thumb      = $lightbox_thumb_info[0];
  }

  if ( $lightbox_video != '' ) {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'{$lightbox_video}\"";
  } else {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'\"";
  }

  if ( $circle == 'true' ) {
    $output = "<div {$id} class=\"x-btn-circle-wrap{$size}{$block}{$float}\" {$style}><a class=\"x-btn{$class}{$type}{$shape}{$size}{$block}{$icon_only}\" href=\"{$href}\" {$data_jump_target} {$title} {$target} {$info} {$info_place} {$info_trigger} {$info_content} {$lightbox_caption} {$lightbox_options}>" . do_shortcode( $content ) . "</a></div>";
  } else {
    $output = "<a {$id} class=\"x-btn{$class}{$type}{$shape}{$size}{$block}{$float}{$icon_only}\" {$style} href=\"{$href}\" {$data_jump_target} {$title} {$target} {$info} {$info_place} {$info_trigger} {$info_content} {$lightbox_caption} {$lightbox_options}>" . do_shortcode( $content ) . "</a>";
  }
  
  return $output;
}

add_filter('init', function() {
   remove_shortcode( 'button' );

   add_shortcode( 'button', 'x_shortcode_button2' );
});

After that, add a attribute of data_jump_target=”#collapse-1″ in the [button] shortcode. For example:

[button href="#" data_jump_target="#collapse-1"] Jump and Open Accordion #1 [/button]

Hope this helps. 🙂

Thank you.