0

If I have a simple BS collapse:

<a href="#content-<?php echo id; ?>" data-toggle="collapse">Trigger Text</a>

<div id="content-<?php echo id; ?>" class="collapse">
Content...
</div> 

Is it possible to trigger the toggle to open as it goes to it from a link in a separate module?

Say link would be:

https://website/article#content-83

It's already going to where content #83 is located at the article, but since the toggle is set to closed on that page it only goes to the article page and never actually shows the contents of content #83. There are reasons it needs to be closed on the page it shows up on, but not if clicked through from that link.

  • So before the content is displayed, you want to have a plugin conditionally remove the class="collapse" attribute? or would you like to change the value from collapse to something else? This, of course, would be a "conditional" action whereby only the id value matches the fragment value. Relevant reading: Get fragment (value after hash '#') from a URL in php – mickmackusa Dec 12 '18 at 7:19
  • I've never made a plugin, but if that would help I can give it a shot. Just need the collapse to open when accessed through that link. The content is JComments comments. I have them collapsed with certain info on toggles, but it screwed up the link in the latest comments module so that when you click comment #83 it just takes you to the article and stops, so you still have to look through the toggles to find #83 and then manually open it, where if it automatically opened it you wouldn't have to search for it and open it, you would just know where it is because it's the only one open. – Mythic Dec 12 '18 at 15:14
  • The system has bumped this page because it is not deemed resolved by the system. Did you manage to resolve this with Sharky's answer? By yourself? Or is it not yet resolved? Please progress this page by accepting or answering or editing your question. – mickmackusa Jan 7 at 12:07
  • No, moved on. Haven't tried the new solution, but since there's already an a tag that opens the collapse on the page i'm not sure how or where to work that in. – Mythic Jan 8 at 0:20
0

Get the fragment from URL, check that element with the same ID is collapsible and run collapse('show') if it is:

jQuery(function() {
    var fragment = window.location.hash;
    if (fragment && jQuery(fragment).hasClass('collapse')) {
        jQuery(fragment).collapse('show');
    }
});
| improve this answer | |
  • Where would that go? Keep getting errors anyplace I put it. – Mythic Dec 13 '18 at 16:23
  • This is JavaScript code. You can add it to your template (either inline or in a .js file) or to layout override. Or load it with a plugin. Related documentation: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page and docs.joomla.org/Adding_JavaScript. – Sharky Dec 13 '18 at 21:08
  • I got it working, but it only opens the toggle for a few seconds and then immediately it closes again. – Mythic Dec 13 '18 at 23:09
  • @Mythic I suppose rather than changing the attribute value, you could remove the class so that it "doesn't get pickup again" by another js function. (if this answer was helpful to you, please upvote; if it resolves your issue, please accept) – mickmackusa Dec 14 '18 at 3:10
  • Can't do that or they all just stay open. Does seem like something is overriding it at the end though. Tried finding a place where it would be last to run, but no such luck yet. – Mythic Dec 14 '18 at 4:57
0

In case you have something else triggered by the click that opens the collapse, this will work as well:

 $('a[href="' + window.location.hash + '"]').click();

The thing you need to watch for in doing either of these approaches is javascript load order. It's always possible jQuery may not have loaded by this time (in which case you'll get an error about '$') or in noConflict mode (try again replacing '$' with 'jQuery') or that the collapse plug-in hasn't loaded yet (when the call to 'collapse()' will toss a null object/method error). Javascript is funny that way, especially when attributes like 'async' are added to script tags because Google says that makes the page load faster.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.