Posted By

paulo72 on 08/22/11

Tagged

Versions (?)

Last Edited at 08/22/11 07:02pm

Statistics

Viewed 142 times

Favorited by 0 user(s)

Related snippets

Generic concertina class

/ Published in: jQuery

The containing object takes the class 'conc-scope'. This says that any 'conc-trigger' inside this object will open and close any 'conc-content'. This allows for greater flexibility with the markup.
We can also set a class of 'conc-exclusive' on the root (where we set the scope). This will ensure that as one concertina opens any other currently open ones will close. This is currently a bit crude in terms of the animation.
You can also set a class of conc-default on the root of any concertina that you want to be open as default when the page loads.
If you want to have a different label to show when the concertina is active, and again when it is inactive add the spans seen in the markup for the trigger.

Todo: make accessible by hiding triggers in screenreader and ensuring content is only visually hidden.

Mandatory:
.conc-scope
.conc-trigger
.conc-content

Optional
.conc-exclusive
.conc-default
.active-message
.inactive-message

Highlighted TextExpand

<section class="conc-scope conc-exclusive conc-default">
   <h3 class="conc-trigger">
      <span class="active-message">Hide content</span>
      <span class="inactive-message">Show content</span>
   </h3>
   <div class="conc-content">
      
   </div>
</section>

<style>
// hide content with css rather than jQuery
.conc-content { display: none; }
.conc-trigger .active-message { display: none; }
.conc-trigger .inactive-message { display: inline; }
.conc-active .active-message { display: inline; }
.conc-active .inactive-message { display: none; }
</style>

<script>
jQuery(function () { // doc ready
      // if a concertina has class .conc-default it is open as default
      jQuery('.conc-default').children('.conc-trigger').addClass('conc-active');
      jQuery('.conc-default').children('.conc-content').show();
      //  trigger the concertina to change when clicked
      jQuery(".conc-trigger").click( function(e) {
         // Prevent default behaviour
         e.preventDefault();
         // on click if this has class of acitve   
         if ( jQuery(this).hasClass('conc-active') ) {
            // remove active class first, we are collapsing
            jQuery(this).removeClass('conc-active');
            // find closest conc-scope, then traverse to children, and collapse
            jQuery(this).closest('.conc-scope').children('.conc-content').slideUp();         
         // or    
         } else {
            // activate selected
            // add the active class
            jQuery(this).addClass('conc-active');
            // for when we don't want more than one concertina open at once
            // if the closest element that has class conc-scope also has class conc exclusive close all open concertinas
            if ( jQuery(this).closest('.conc-scope').hasClass('conc-exclusive') ) {
               // deactivate current
               if ( jQuery('.conc-active') ) { jQuery('.conc-active').removeClass('conc-active'); }
               // hide all open concertina content
               jQuery('.conc-content').slideUp();
               // add class of active to the .conc-trigger that was clicked
               jQuery(this).addClass('conc-active');
               // open the appropriate .conc-content
               jQuery(this).closest('.conc-scope').children('.conc-content').slideDown();   
            } else {
               // find the closest conc-scope, and traverse to children, then reveal with a slide down 
               jQuery(this).closest('.conc-scope').children('.conc-content').slideDown();
            } // close else
         } // close else
      }); // close click() 
}); // close doc ready
</script>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.