Monitor Reply

Support

jQuickie with jQuery UI

Permalink Browser Info Environment October 10, 2013 at 8:06 AM

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:	Archived

JohntheFish replied on Oct 10, 2013 at 8:55 am Permalink Reply

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

Viewing 15 lines of 34 lines. View entire code block.

 
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(){
      // when finished sliding, swap the icon again
      $(orig_this).find('i').attr('class', icX);
      // add a marker class, not really needed, but can be useful
      $(targ).addClass('expander_closed').removeClass('expander_open');
    });
 
  // currently closed, so open
  }else{
    // swap the icon while opening
    $(orig_this).find('i').attr('class', icCX);
 
    // remove the marker class
    $(targ).removeClass('expander_closed').addClass('expander_open');
 
    // cancel any pending slide and slide it down
    $(targ).stop(true,true).slideDown(speed,'swing', function(){
 
      // when finished, swap the icon again
      $(orig_this).find('i').attr('class', icC);
    });
  }
  return false;
});

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 Oct 10, 2013 at 9:12 am Permalink Reply

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 Oct 10, 2013 at 3:02 pm Permalink Reply

Thanks for your quick reply :-)
I'll try and see if I can make it work.

/ Mats

jQuickie (c5.6)

Support

jQuickie with jQuery UI

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post