Docs

[Andrew]

WP 4.5.1
X-Theme : 4.4.1
_______________

Hi guys!

I have an Accordion with a few Headers. Some of the items contain a fair amount of text, and when selecting another Header, it scrolls off screen and out of focus. I’m not sure how to control that, but imagine there must be a way to restrict the selected Header from scrolling off screen; functioning similar to a fixed-top menu perhaps.

Can this be done?

Cheers!

Andrew

[Prasant Rai]

Hello Andrew,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Andrew]

Hi Prasant,

URL : http://127.0.0.1:4001/wordpress

I excluded it as I believed my question related to the software’s capability.

I hope you can help.

Cheers!

Andrew

[Christopher]

Hi there,

Please check the provided URL, it doesn’t work.

If you’re using VC, please add following code in Customize/Custom/JavaScript :

jQuery( function ( $ ) {
 $(document).on('click', '.vc_tta-panel-heading a', function( e ){
  if ( $(this).parents('.vc_tta-panel').hasClass('vc_active') ){
    $(this).parents('.vc_tta-panel').removeClass('vc_active');
  }else {
    $(this).parents('.vc_tta-panel').addClass('vc_active');
  }
  $('html, body').stop();
 });
});

Hope it helps.

[Andrew]

Hi Christopher,

Thanks for the input. The URL is on a local development site; not sure if it’s reachable.

Development is being done with Cornerstone, so your info won’t apply. Can you offer a solution through Cornerstone? Essentially, I need whichever Accordion header I select to be restricted from scrolling off the top of the screen. The problem occurs when the amount of content in the Accordion item is more than the height of the screen. Once at the end of that item, the next header is just below and visible, and then selecting that header scrolls the headers out of focus.

I know this might be difficult visualizing, and if you’re not able to reach the site, then I’m stuck. However, perhaps my explanation above is sufficient for you to help me.

Cheers!

Andrew

[Rue Nel]

Hello Andrew,

Is there any possibility that you can upload your staging area somewhere so that we can check it? Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[Andrew]

Hi Rue,

Thanks for getting back to me. It’s unfortunate that you are unable to see the effect via the local development website.

However, I’ve attached 3 JPGs showing the state of the Accordion which will make the effect clear. It appears to be the product of the ‘LINK ITEM’ = ‘ON’ function. If this option is set to ‘OFF’, the Accordion Item Headings stay in the viewport.

Hope you can help.

Cheers!

Andrew

[Lely]

Hello Andrew,

Thank you for the detailed explanation and screenshots. Please try adding the following custom javascript on Appearance > Customize > Custom > Edit Global Javascript:

jQuery(document).ready(function($) {
   $('.x-accordion-toggle').click(function() {
      var $adminbarHeight = $('#wpadminbar').outerHeight();
      var $navbarHeight   = $('.x-navbar').outerHeight();
      var $this = $(this);

      setTimeout(function() {
         $('html, body').animate({ 
            scrollTop: $this.offset().top - $adminbarHeight - $navbarHeight + 1
         }, 400)
      }, 300)
   });
});

This code should move the open accordion content on the viewport area of the screen.

Hope this helps.

[Andrew]

Hi Lely,

Thanks for the code fix. The behavior of the selected accordion item headers are now restricted to the viewport – which is what was needed. (I can’t imagine I’m the only one who has come across this.) There is a minor tweak needed to ensure the accordion header is not obscured by (beneath) the navbar. At the moment this is the case, although it’s only a few pixels, and it seems only on the initial toggling of the the accordion. For now I can live with this, but imagine a permanent fix will be forthcoming.

Cheers!

Andrew

[Rue Nel]

Hello Andrew,

Thanks for the updates! We really appreciate the feedback! This is something we can add to our list of feature updates. This way it can be taken into consideration for future updates.

Thanks!

[Author]

Posts