Boost Accordion

Re: Boost Accordion

by Bob Gilmore -
Number of replies: 8
Picture of 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)
In reply to Bob Gilmore

Re: Boost Accordion

by Daniell Goodin -

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: -
In reply to Daniell Goodin

Re: Boost Accordion

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

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: -
In reply to Fernando Acedo

Re: Boost Accordion

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin 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: -
In reply to Gareth J Barnard

Re: Boost Accordion

by Daniell Goodin -
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: -
In reply to Bob Gilmore

Re: Boost Accordion

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin 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)
In reply to Bob Gilmore

Re: Boost Accordion

by Bob Gilmore -
Picture of 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 (2)
In reply to Bob Gilmore

Re: Boost Accordion

by Bob Gilmore -
Picture of 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 (2)