Foundation CSS Kitchen Sink Dropdown Pane

Last Updated : 25 Feb, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Kitchen Sink has the foundation elements to work well in our websites and applications. The Dropdown Pane is the class in Foundation that is used to display the content when the element is clicked or toggle to display or hide the content.

Foundation CSS Kitchen Sink Dropdown Pane class:

dropdown-pane: It is used to create the dropdown pane with the toggle feature.

Syntax:

<button class="button" type="button"
    data-toggle="example-dropdown">
    Dropdown pane
</button>
<div class="dropdown-pane" 
    id="example-dropdown" data-dropdown>
    ...
</div>

Example 1: This example illustrates the implementation of the Dropdown Pane in the Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink</title> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
            crossorigin="anonymous"> 
    </script> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <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> 
    <h1 style="color: green;"> 
            GeeksforGeeks 
    </h1> 
    <h3>Foundation CSS Kitchen Sink Dropdown pane</h3> 
    <button class="button" 
            type="button" 
            data-toggle="example-dropdown"> 
        Dropdown Pane 
    </button> 
    <div class="dropdown-pane" 
         id="example-dropdown" data-dropdown> 
        <p> 
            A Computer Science portal for geeks.  
            It contains well written, well thought  
            and well explained computer science  
            and programming articles 
        </p> 
    </div> 
    <script> 
        $(document).ready(function() { 
            $(document).foundation(); 
        }) 
    </script> 
</body> 
</html>

Output:

Dropdown Pane

Example 2: This example describes the multiple dropdown pane having the toggle option to render the data in Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink</title> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
            crossorigin="anonymous"> 
    </script> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <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> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Foundation CSS Kitchen Sink Dropdown pane</h3> 
    <button class="success button" 
            type="button" 
            data-toggle="example1-dropdown"> 
        Dropdown Pane 1 
    </button> 
    <div class="dropdown-pane" 
         id="example1-dropdown" data-dropdown> 
        <p> 
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science  
            and programming articles 
        </p> 
    </div> 
    <button class="alert  button" 
            type="button" 
            data-toggle="example2-dropdown"> 
        Dropdown Pane 2 
    </button> 
    <div class="dropdown-pane" 
         id="example2-dropdown" data-dropdown> 
        <p> 
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science  
            and programming articles 
        </p> 
    </div> 
    <button class="secondary button" 
            type="button" 
            data-toggle="example3-dropdown"> 
        Dropdown Pane 3 
    </button> 
    <div class="dropdown-pane" 
         id="example3-dropdown" data-dropdown> 
        <p> 
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science  
            and programming articles 
        </p> 
    </div> 
    <script> 
        $(document).ready(function() { 
            $(document).foundation(); 
        }) 
    </script> 
</body> 
</html>