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

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
 

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 (1)