Themes

Boost Accordion

 
Gareth J Barnard
Boost Accordion
Core developersParticularly helpful MoodlersPlugin developers

Hello,

In Moodle 3.3.4+ 2017051504.03 (Build: 20180201)  and the Boost theme version 2017051500 - I cannot get the accordion collapse functionality to work, e.g. either of these two examples:

I've no idea why apart from a possible bug in the core AMD alpha Bootstrap JS.  Has anybody else got this working please?  If so, what did you do?

Thanks,

Gareth

 
Average of ratings: -
It's only an avatar...
Re: Boost Accordion
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Gareth, 

Could it be a clash between 'aria' elements in your code and those already in Boost theme?

Is YOUR code correct? Have you overlooked the simple stuff and missed off a vital element?Ouch!!!

m

 
Average of ratings: -
Gareth J Barnard
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developers

Hi Mary,

It's a copy paste from the BS site on Boost with no modifications or errors on the console.  However it is a development site so might be something and may need to try on a pure site.

G

 
Average of ratings: -
Picture of Richard Oelmann
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developersTesters

Boost was built on BS4 Alpha v4, but I believe the doc you link to is Alpha v6.

There were some changes and bug fixes to accordian collapse in alpha v5 and alpha v6

https://github.com/twbs/bootstrap/issues/20630

https://github.com/twbs/bootstrap/issues/20939

Could it be that some of the BS developments between Alpha 4 and Alpha 6 as well as between there and BS4 Stable release may be the cause of your code not working?

eg.

https://github.com/twbs/bootstrap/issues/18824 and https://github.com/twbs/bootstrap/pull/18847


Richard

 
Average of ratings: -
Gareth J Barnard
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developers

Thanks Richard, but the link to the doc's is for V4 alpha -> https://v4-alpha.getbootstrap.com/components/collapse/#accordion-example. And v6 alpha does fix things pertaining to the accordion in the area of the 'parent' which is required for a group where one opens and the other closes.

Interestingly though, the example BS documentation page where the example works uses v6 and not v4 - https://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js - snag is that Moodle core has not kept pace with the development of the BS framework and therefore has buggy code.

And thanks Rick, but totally unrelated.

 
Average of ratings: Useful (1)
It's only an avatar...
Re: Boost Accordion
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Works OK on my website...

In fact it probably works here too...or should...let's see...

Collapse example

Link with href Button with data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Accordion example

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Well that seems to work OK.

I got the code from here:

https://v4-alpha.getbootstrap.com/components/collapse/

Yes!!!

Cheers

M

 
Average of ratings: -
Gareth J Barnard
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developers

Sorry Mary, does not work there as when you open one collapse button then the the existing one open is meant to close!

 
Average of ratings: -
It's only an avatar...
Re: Boost Accordion
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Gareth,

Just wondering now how you are adding this code.

Are you adding it into the Text Editor? If so I use TinyMCE if you are using the Default  (ATTO) Editor, then that may well be the cause of the failure.

Let me test it here just out of curiosity.

Switched to ATTO (Default)

OK TESTING:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Well Looks like it's ATTO that's at fault somewhere along the line!
As this does not appear to be working when displayed, but works when testing it before submitting it to the Forum.
How very odd.

Go figure...


 M
 
Average of ratings: -
It's only an avatar...
Re: Boost Accordion
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters
Just stopped by to see if there is any change to the post and found that there is, as it appears to be working OK now...thank goodness for that!

Must have been the JS not picking up, either that or HQ fixed it behind the scenes. LOL

Well all seems to be OK...
So I will say Good night all!

M
 
Average of ratings: -
Picture of Emma Richardson
Re: Boost Accordion
Documentation writersParticularly helpful MoodlersPlugin developers

This atto version is not working for me on this page...

 
Average of ratings: -
It's only an avatar...
Re: Boost Accordion
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Hi Emma, 

I'm just testing these two Accordians now and like last night the ATTO one is not working on my iPad Mini.

Looks like ATTO breaks the JavaScript for the page, which was something Sam Hemelrik discovered a while ago.. i may be wrong but I think it was some other reason, which got fixed..

I was hoping Gareth might be able to shed some light on this, indeed it may be that he was seeing this behaviours too the first time round?

Ah well at least it works with TinyMCE.

Mary

 EDIT

I have just noticed that if you hit the ATTO first text line button the TinyMCE Accordians opens instead, so perhaps it's a conflict of same class selectors ... Ummm food for thought...a bit like the Carousel.

Ah well at least I am learning something.



 
Average of ratings: -
Gareth J Barnard
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developers

Ok, just tried with TinyMCE and Boost with:


<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

and still does not work in M3.4!

Not looked at this as had a big computer failure and had to reinstall four Moodle development environments from scratch with individual component WAMP configuration and test HTTPS certificates.

 
Average of ratings: -
It's only an avatar...
Re: Boost Accordion
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Say no more! Big computer failure is bad enough without WAMP problems too...I sympathise.

I've just added the accordion to my website and I can see it's not doing what it is meant to do.

Looking at the source code it appears to be riddled with YUI ID's.

I doubt if that has any affect on it really, but who knows!

Cheers

M

 
Average of ratings: -
Picture of Richard Oelmann
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developersTesters

Ah apologies Gareth, I misread that as Bootstrap4 Alpha, rather than the alpha 4 docs. smile

 
Average of ratings: -
Picture of Rick Jerz
Re: Boost Accordion
Particularly helpful Moodlers

Gareth, I am using your collapsed topics.  I am not sure if this is what you are referring to as "accordion collapse." 

Open All and Close All work, and so do individual topics.  No problem at all.

I am running Moodle 3.4.1+ (Build: 20180201), php 7.1.12, and MariaDB 10.1.30.

I have been using Collapsed Topics for awhile, so I am sure that I once ran it with Moodle 3.3.3+ (but I do not see that I ever installed 3.3.4+, I went from 3.3.3+ (build: 20171214) right to 3.4.)

 
Average of ratings: -
Picture of Rick Jerz
Re: Boost Accordion
Particularly helpful Moodlers

From Mary's example above, I think I understand what "accordion" is.  Interesting effect.

I am wondering if this feature might make its way into Collapsed Topics, or even moodle core, as a way to expand and collapse topics?

Right now, I don't mind the little drop-down arrows, but I would probably switch to the accordion effect if it was an option.

 
Average of ratings: -
Gareth J Barnard
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developers

Hi Rick,

Collapsed Topics already has this functionality with the 'One section' setting on a per course basis and a global default.

G

 
Average of ratings: -
Picture of Bob Gilmore
Re: Boost Accordion
Particularly helpful Moodlers

I managed to get accordions, tabs, carousels and even a reliable flexbox working using the Generico filter plugin.

I didn't use the default accordion supplied in Generico as it's not a bootstrap one, so I've had to create two templates: a container and a card.

Container:

Body template:

<div id="@@AUTOID@@"  role="tablist" aria-multiselectable="false">

End tag:

</div>

Custom JS:

$(document).ready(function(){
    $('.collapse').on('show.bs.collapse', function (e) {
        $('.collapse').collapse("hide")
    })
})

Card:

Body:

<div class="card genericoCard">
    <div class="card-header" role="tab" id="@@AUTOID@@">
      <h5 class="mb-0"  style="margin-bottom:0px">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse@@AUTOID@@" aria-expanded="true" aria-controls="collapse@@AUTOID@@"><span class="fa" aria-hidden="true"></span>
          @@heading@@
        </a>
      </h5>
    </div>

    <div id="collapse@@AUTOID@@" class="collapse show" role="tabpanel" aria-labelledby="heading@@AUTOID@@">
      <div class="card-block">

End:

      </div>
    </div>
  </div>

Custom JS:

// This removes any stray <br> tags at the top of the accordion. Probably should be expanded to remove empty <p> elements
if($('.genericoCard').next().is('br')) { $('.genericoCard').next().remove(); }

Custom CSS:

.genericoCard { border: #ddd 1px solid; margin-bottom: 0; }
.genericoCard [data-toggle="collapse"] span:before{ content: "\f139"; }
.genericoCard [data-toggle="collapse"].collapsed span:before{  content: "\f13a"; }

Once this is set up, you insert a container element and inside add as many cards as you need. Looks a little messy in the editor, but is much easier than trying to manually code them in Atto.


 
Average of ratings: Useful (2)
on the Great Wall
Re: Boost Accordion
 

Bob, 

Popped you a PM on the Generico, No joy for me using this, unfortunately. 


Not sure if the Gareth or Mary have found a fix for this. 

But as I am back into many, many pages course creation over the coming months and as being Aus based and have to cover 7 states. 

The use of Tabs and Accordions migrates the scroll of death somewhat. 


I have come across this little Kiwi site that is brilliant for making quick Accordions and Modals. (I haven't used the modal generator as yet)

http://bootstrapbuild.com/accordion.php

I can see that within the webpage they are working as they should but as I bring them into my production site 3.32 with Adaptable 1.6.1 and development site of 3.4 Adaptable 1.6.1. they are doing the no close thing. 

Love to hear back on any fix that pops up. 

 
Average of ratings: -
Gareth J Barnard
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developers

Problem will in theory be solved by: MDL-56511.

 
Average of ratings: Useful (1)
Picture of Fernando Acedo
Re: Boost Accordion
Particularly helpful MoodlersPlugin developersTesters

Most of the Moodle Themes are based in Bootstrap 2.3 and that generator is for Bootstrap 3. The code generated  probably will not work with moodle themes based in BS2.

 
Average of ratings: -
Gareth J Barnard
Re: Boost Accordion
Core developersParticularly helpful MoodlersPlugin developers

? = confused because:

This post and threads are about BS 4 JS not working to support the markup.  Off the top of my head I'm not sure how the structure of the Accordion has or has not changed between 2, 3 and 4 of BS.  But if it has not then most likely will work with BS 2 and 3 based themes but not 4 if they are based upon the version in Moodle core.

So with my moderators hat on, please can we all stick to the topic instigated in the thread pertaining to Boost and Accordion (i.e. the version of Bootstrap V4 in core) and avoid going off topic.  This will be confusing.  If you have an issue that is related but does not pertain to BS4 and Boost, then please:

Search to see if it has been raised before and if not, create a separate post.

 
Average of ratings: -
on the Great Wall
Re: Boost Accordion
 
Gareth,

Thanks for the link to the work being done.


Yes, trying not to derail the thread and I am sure that there are other course designers that are in the same boat across other themes, that may
have read this thread, much as I did.

We all know how frustrating it is when something works, should work, has worked, then stops working. As we spend hours trying to see where things are going wrong.

That is why I was interested in Bob's code for Genrico, a good case of sharing to the community (while at this stage I haven't been able to get it working on my setups)..

As a quick fix, for others that may pass by this thread until we get confirmation that they are back in order, both Poodle and H5P (created as a hidden item then embedded) are work around's. While both have limitations in that H5P accordions haven't got the ability to insert pictures or documents (That I have seen as yet) and Poodle can be a little frustrating when you use it for large amounts of mix data and graphics. But the open and close effect is "auto" as per the original threads concerns.

I will bow out now as mixing with coding guru's can be a little scary..:-P
 
Average of ratings: -
Picture of Justin Hunt
Re: Boost Accordion
Particularly helpful MoodlersPlugin developers

Just a note that to share Generico templates, there is a much easier way than pasting in the code.

There is a little green box on the right on each templates settings page. You can export a template to a text file(bundle) that way. Or import one by dragging a bundle over the box.

0zjW7c9pfLLsut5zYsStmTiVrsjMyJKWFU8ItTlFv049B4PHpVC479LLJMtX0Yp-Eso96ViPSxXedjFnpR3D4QKwM8ucKZbRNCJytV49LWljX49OdilgD-zWVF1aLC9DtBvAGxSg1UM

 
Average of ratings: Useful (1)
Picture of Bob Gilmore
Re: Boost Accordion
Particularly helpful Moodlers

Following up on Justins comment above, attached is the first bundled template for the container.  Make sure the generico filter is installed and add the bundles to a template. As Justin notes, drag the text file onto the Bundle button on the template toi import everything.

Note that I'm using the Fordon theme, but this also works in Boost . Any bootstrap 4 theme should be fine.

Second container and examples in the reply to this post.


 
Average of ratings: Useful (1)
Picture of Bob Gilmore
Re: Boost Accordion
Particularly helpful Moodlers

And the second bundled template for a card is attached to this post (sorry for double posts... 1 attachment limit).

The finished accordion appears as shown below:


In atto, the page appears as shown below.


 
Average of ratings: Useful (1)
Picture of Bob Gilmore
Re: Boost Accordion
Particularly helpful Moodlers

I've updated my Generico template for 3.5 / Bootstrap 4 if anyone is interested.

Post with images and attached templates is : https://moodle.org/mod/forum/discuss.php?d=324771#p1497326


 
Average of ratings: -
Picture of Ilona El
Re: Boost Accordion
 

Hi all!

I have been using the accordion effect in my moodle course (version 3.3.2, boost theme) and then moved my course to a newest version (3.5.1). The effect works fine, however, the margins between the items and their content don't look so nice. I think that you can see what I mean in the following images. 

Could you please help me fix the margins? Thanks for your time. smile 

Items' margins

accordion

Content margins

accordion

 
Average of ratings: -