Difference between revisions of "CSS Grid Expand / Collapse"

From Level Access Web Labs
Jump to navigation Jump to search
(Initial CSS Grid Implementation on Labs)
 
Line 46: Line 46:
 
             }
 
             }
 
         </style>
 
         </style>
        <script>
 
            /*Toggles True/False for values  */
 
            function toggle (index,value) {
 
              var b = (value === 'true');
 
              return !b;
 
            }
 
 
            jQuery('.topic-title[aria-controls]').click(function(e){
 
              e.preventDefault();
 
              //Searches for any expanded grid items that are NOT the one controlled by the link that was clicked
 
              jQuery(this).parents('.topic').siblings('.topic-programs.expanded').not( "#" + jQuery(this).attr('aria-controls') ).toggleClass(function() {
 
                //If expanded grid items are found, toggles the aria-expanded attribute for the relevant expanding link
 
                jQuery( "#" + jQuery(this).attr('aria-labelledby') ).attr('aria-expanded', toggle);
 
                //and toggles the expanded class for this grid item
 
                return 'expanded';
 
              });
 
              jQuery(this).attr('aria-expanded', toggle);
 
              jQuery( "#" + jQuery(this).attr('aria-controls') ).toggleClass('expanded');
 
            });
 
        </script>
 
 
     </head>
 
     </head>
 
<body>
 
<body>
Line 140: Line 120:
 
</div>
 
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 +
        <script>
 +
            /*Toggles True/False for values  */
 +
            function toggle (index,value) {
 +
              var b = (value === 'true');
 +
              return !b;
 +
            }
 +
 +
            jQuery('.topic-title[aria-controls]').click(function(e){
 +
              e.preventDefault();
 +
              //Searches for any expanded grid items that are NOT the one controlled by the link that was clicked
 +
              jQuery(this).parents('.topic').siblings('.topic-programs.expanded').not( "#" + jQuery(this).attr('aria-controls') ).toggleClass(function() {
 +
                //If expanded grid items are found, toggles the aria-expanded attribute for the relevant expanding link
 +
                jQuery( "#" + jQuery(this).attr('aria-labelledby') ).attr('aria-expanded', toggle);
 +
                //and toggles the expanded class for this grid item
 +
                return 'expanded';
 +
              });
 +
              jQuery(this).attr('aria-expanded', toggle);
 +
              jQuery( "#" + jQuery(this).attr('aria-controls') ).toggleClass('expanded');
 +
            });
 +
        </script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 17:14, 19 April 2019

Sample CSS Grid Implementation

Here's an example of a CSS Grid implementation of a 3 column layout.
The contents of each program's details are programmatically connected to the links that spawn the contents. Additionally, the program contens occur directly after the program within the reading order and the tab order.
Clicking on a program link will toggle the link's aria-expanded attribute, as well as display the relevant program details. Any previously selected programs will be automatically closed.
What this implementation does not do is provide for buttons within the displayed program details.

Apprenticeship Content
Lorem Ipsum

Arts & Media Content
Lorem Ipsum

Automotive Content
Lorem Ipsum

Business & Management Content
Lorem Ipsum

Computer Science Content
Lorem Ipsum

Criminal Justice Content
Lorem Ipsum