Posted By

paulo72 on 08/22/11


Tagged

show hide concertina


Versions (?)

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

  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  

You need to login to post a comment.