Foundation - Collapse/Uncollapse Rows

Description

Using the media query size, include the collapse and uncollapse class to the row element to show the paddings.

Example

The following example demonstrates the use of Collapse/Uncollapse Rows in the Foundation. We have included the collapse class for medium media query and uncollapse for large media query.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>

      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2>Collapse/Uncollapse Row</h2>

      <div class = "row medium-collapse large-uncollapse">
         <div class = "small-6 columns" style = "background-color:#8BD6EE;">
            Collapse and uncollapse row
         </div>

         <div class = "small-6 columns" style = "background-color:#C0B0F0;">
            Collapse and uncollapse row
         </div>
      </div>

   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given html code collapse_row.html file.

  • Open this HTML file in a browser, an output is displayed as shown below.

foundation_the_grid.htm
Advertisements