Foundation 5 Collapse/Uncollapse

In this example below you will see how to do a Foundation 5 Collapse/Uncollapse with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nicwinn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nicwinn ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Foundation 5 Collapse/Uncollapse</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="row small-collapse large-uncollapse">
    <div class="columns panel">
<p>lksef s;dfoj;ojsaf sd;fojjas;dfjo</p>
<p>lksef s;dfoj;ojsaf sd;fojjas;dfjo</p>
<p>lksef s;dfoj;ojsaf sd;fojjas;dfjo</p>
<p>lksef s;dfoj;ojsaf sd;fojjas;dfjo</p>
<p>lksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjolksef s;dfoj;ojsaf sd;fojjas;dfjo</p>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/nicwinn/foundation-5-collapseuncollapse-jqJgpX */
body {
  background: green;
}
.row {
  background: red;
}

Comments