jQuickie with jQuery UI

Permalink Browser Info Environment
Hi,
I want to create an accordion with jQuickie using jQuery UI.
How do I do this?
There are some sample code on the jQuery.com , so how do I use that code together with jQuickie???

I'm new to this, so please bear with me ;-)

/ Mats

Type: Discussion
Status: New
Debaryon
View Replies:
JohntheFish replied on at Permalink Reply
JohntheFish
The general principle with such widgets is to:

a) create the html elements on the page as required by the jquery widget.

b) paste the sample code into jQuickie and change the selectors to match the html elements on your page .

Then, in the assets tab, select the asset needed for the widget.

However, with jQueryUI accordions there is a problem in that the widget is not compatible with concrete5 and is not included in the c5 version of jQueryUI. :-(

You could create an asset for an alternate accordion plugin and add the jquery for that, or you could start from first principles - it is fairly easy code.

For most accordion systems, the structure is an H3 that is always visible followed by a DIV that is slid down/up. Below is slimmed down from an accordion I use, the 'i' tags are for icons from the bootstrap icons provided by concrete5, so you would may want to change that:
<div id="page_area">
  <h3>Section A<a href="#section_a" class="ccm-ui expand"><i class="icon-chevron-up"></i></a></h3>
  <div id="section_a" class="expander_open">
    My content for section A
  </div>
  <h3>Section B<a href="#section_b" class="ccm-ui expand"><i class="icon-chevron-up"></i></a></h3>
  <div id="section_b" class="expander_open">
    My content for section B
  </div>
</div>


The associated jquery, assuming you have an overall wrapper id for the page area such as '#page_area'
var icX = 'icon-chevron-down';
var icXC = 'icon-chevron-left';
var icC = 'icon-chevron-up';
var icCX = 'icon-chevron-right';
$('#page_area a.expand').click(function(ev){
  ev.preventDefault();
  var targ = $(this).attr('href');
  var speed = 'slow';
  var orig_this = $('#page_area a[href="'+targ+'"]');
  // currently open, so close
  if($(targ).is(':visible')){
    // swap icon to 'closing'
    $(orig_this).find('i').attr('class', icXC);
    // cancel any pending slide and move it up
    $(targ).stop(true,true).slideUp(speed,'swing', function(){

The 'orig_this' part is swapping the icon round while it expands/contracts.

As this is stripped down from some of my more complex code, I can't guarantee it is 100% straight off. To get started, cut/paste the HTML into an HTML block and the jquery into a jquickie block and give it a go.

The bootstrap icons are available when logged in, but not when you are logged out, so you would need to cope with that. You may also need to add the class 'ccm-ui' to the 'a' elements for the bootstrap icons to work.

Once you have it working and styled against a simple html block, you can extend the concept to work on a content block that is a mix of h3 and div elements, or even on an entire area of a page.

The use of h3 and div elements is completely arbitrary. I have even seen accordions build out of definition lists with dt/dd elements.
JohntheFish replied on at Permalink Reply
JohntheFish
I just quickly tried out the above and made a couple of small changes, so if you got it by email, please check the actual forum for up to date code.
Debaryon replied on at Permalink Reply
Debaryon
Thanks for your quick reply :-)
I'll try and see if I can make it work.

/ Mats

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.