Advanced Search

Generic concertina class

/ Published in: jQuery
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!-- html -->
  2. <section class="conc-scope conc-exclusive conc-default">
  3.    <h3 class="conc-trigger">
  4.       <span class="active-message">Hide content</span>
  5.       <span class="inactive-message">Show content</span>
  6.    </h3>
  7.    <div class="conc-content">
  8.       <!-- content goes in here -->
  9.    </div>
  10. </section>
  11.  
  12. <!-- css -->
  13. <style>
  14. // hide content with css rather than jQuery
  15. .conc-content { display: none; }
  16. .conc-trigger .active-message { display: none; }
  17. .conc-trigger .inactive-message { display: inline; }
  18. .conc-active .active-message { display: inline; }
  19. .conc-active .inactive-message { display: none; }
  20. </style>
  21.  
  22. <!-- script -->
  23. <script>
  24. jQuery(function () { // doc ready
  25.       // if a concertina has class .conc-default it is open as default
  26.       jQuery('.conc-default').children('.conc-trigger').addClass('conc-active');
  27.       jQuery('.conc-default').children('.conc-content').show();
  28.       //  trigger the concertina to change when clicked
  29.       jQuery(".conc-trigger").click( function(e) {
  30.          // Prevent default behaviour
  31.          e.preventDefault();
  32.          // on click if this has class of acitve   
  33.          if ( jQuery(this).hasClass('conc-active') ) {
  34.             // remove active class first, we are collapsing
  35.             jQuery(this).removeClass('conc-active');
  36.             // find closest conc-scope, then traverse to children, and collapse
  37.             jQuery(this).closest('.conc-scope').children('.conc-content').slideUp();         
  38.          // or    
  39.          } else {
  40.             // activate selected
  41.             // add the active class
  42.             jQuery(this).addClass('conc-active');
  43.             // for when we don't want more than one concertina open at once
  44.             // if the closest element that has class conc-scope also has class conc exclusive close all open concertinas
  45.             if ( jQuery(this).closest('.conc-scope').hasClass('conc-exclusive') ) {
  46.                // deactivate current
  47.                if ( jQuery('.conc-active') ) { jQuery('.conc-active').removeClass('conc-active'); }
  48.                // hide all open concertina content
  49.                jQuery('.conc-content').slideUp();
  50.                // add class of active to the .conc-trigger that was clicked
  51.                jQuery(this).addClass('conc-active');
  52.                // open the appropriate .conc-content
  53.                jQuery(this).closest('.conc-scope').children('.conc-content').slideDown();   
  54.             } else {
  55.                // find the closest conc-scope, and traverse to children, then reveal with a slide down 
  56.                jQuery(this).closest('.conc-scope').children('.conc-content').slideDown();
  57.             } // close else
  58.          } // close else
  59.       }); // close click() 
  60. }); // close doc ready
  61. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.