accordion

  • Resolved stlunited

    (@stlunited)


    10 years ago

    Using Customizr 3.2.17 with the customzr child theme My site is: https://www.legal-organizer.com/faqs/business/frequently-asked-questions-about-business-organizations/

    Problem:

    I am trying to use the Bootstrap accordion function for a frequently asked questions page. Here is my page https://www.legal-organizer.com/faqs/business/frequently-asked-questions-about-business-organizations/. The problem I am having is when you click on a section to reveal the hidden part it returns to the top of the page instead of staying at the section that is revealed.

    Here is an example of the html that I am using:

    <div class="accordion" id="accordion2">

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse inner">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>

    I searched on the Customizr forum and did not find anything on this issue. I did find this issue of going to the top of the page when the accordion function is used with a slider covered on Stackoverflow here is the link https://stackoverflow.com/questions/19543821/jquery-accordion-keeps-moving-to-top-of-the-page-on-click. The issue for solving that was needing to add to the js a “return false” with the on click event. I copied the file accordion.js to my child theme and attempted to add a false return but cannot get it to work. Any help is greatly appreciated.

    A Second issue I am having is that the right sidebar is appearing after the page content instead in the sidebar. Thanks for your help.

Viewing 13 replies - 1 through 13 (of 13 total)

  • Mmm, you have some errors in the html of the accordion block, that’s for sure explains the problem with the sidebar..

    <div id="collapseBO5" class="accordion-body collapse inner”>

    you see that ” isn’t a ”

    also this is wrong href"#collapseBO12">

    Just copied the whole source of your accordion block in a page of mine, corrected those two things and my sidebar shows rightly.
    Also I haven’t copied/enqueued any accordion.js, ’cause customizr has its accordion (embeds bootstrap 2.3.2 js) and it works fine..

    Thread Starter stlunited

    (@stlunited)

    Thank you very much for your help. You have eagle eyesight. That fixed the sidebar problem but it did not correct the issue of when you click on a question that the goes to the top of the page.

    I did try some changes to the accordion.js file but I did that in the child theme only and I have removed them from that file in the child theme. As of now I am using the files as downloaded from Customizr without any changes. Would replacing them with a new install be my only option. Just confused and really appreciate your help.

    Mmm wanna try disabling Smooth Scrool in Appearance -> Customize -> Global Settings -> Links style and effects
    Enable/disable smooth scroll on click

    But I have that active and don’t have this issue, but still, try.
    Any other script/plugin active?

    Thread Starter stlunited

    (@stlunited)

    I disabled the smooth scroll feature but it did not help. Any click to expose the hidden part causes the page to automatically scroll to the top of the page instead of just revealing the hidden section. You cannot notice it until you are lower on the page than the initial part that is visible when the page opens. Closing a revealed section does does not scroll, it just closes the section.

    Thanks for your help

    Thread Starter stlunited

    (@stlunited)

    Forgot to mention I only have the Akismet plugin activated.

    I know, and I see the issue on your page,
    it’s just that I cannot reproduce it in mine, so cannot understand the reason of this behavior ??

    Thread Starter stlunited

    (@stlunited)

    I disabled the sticky header function at Appearance -> Customize -> Header -> Design& Layout. That stopped the return to top upon a click, however now I lose the sticky header feature that I would really like to keep.

    I looked at the bootstrap-collapse.js v2.3.2 code which is in … inc/assets/js/parts/bootstrap.js and found this code.

    `//trigger click on back to top if sticky enabled
    if ( 0 != $(‘.back-to-top’).length ) {
    $(‘.back-to-top’).trigger(‘click’);
    }
    else {
    (‘html, body’).animate({
    scrollTop: $(anchor_id).offset().top
    }, 700);
    }
    $(‘body’).removeClass(‘sticky-enabled’).removeClass(‘tc-sticky-header’);
    }`

    Is this the code that is causing the scroll to top with the sticky header enabled or would it be something else.
    How can I change this so I can stop the scroll to top and activate the sticky header?

    PS I have no idea how to modify or write js code. Thanks again I really appreciate your time and effort.

    Ah, I see now. It’s a problem with a totally unrelated option ?? (the code you posted above made me understand the reason, so thanks!!! )

    Well for now (till this will be fixed :D)
    Appearance -> Customize -> Header -> Navigation – chech – In responsive mode, limit the height of the dropdown menu block to the visible viewport
    Save & publish.

    Now it should work without issue (and you can re-enable the sticky header, of course)
    I have to sleep now, but I’ll check this topic tomorrow morning, so let me know ??

    Thread Starter stlunited

    (@stlunited)

    That fixed the problem. Thank You.

    However I noticed a new problem with the navigation menu in the header and am not sure if it was there before but want to pass it on.
    When you are on a page that is showing the full navigation bar upon scrolling that navber moves to the right and causes the first item on the right side to move off screen and disappear.

    Once again thank you very much for your help.

    This is about this rule you have in your css:

    /* OPTION 4/1 - CENTER MENU */
.navbar-wrapper .navbar.resp ul.nav.tc-hover-menu {
display:            block;
float:              none;
width:              100%;
margin:             0 22.25%;              /* Adjust +/- % if needed */
}

    so try:
    (keeping it to the right)

    .sticky-enabled .navbar-wrapper .navbar.resp ul.nav.tc-hover-menu{
    margin: 0;
}

    or:

    .sticky-enabled .nav-collapse{ float: none;}

    (I think you’ll prefer this one :P)

    Would you mind marking this topic as resolved? (I mean, the original topic is resolved right?)

    Thread Starter stlunited

    (@stlunited)

    The original topic is resolved. Thank you again.

    I tried both of those and I also changed the right margin % but it still continues to move the right menu item off the screen.
    Not sure next step
    Thanks again for help.

    Should I open a new topic for this?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘accordion’ is closed to new replies.