added a collapsible component for the alumni section

Author: ishaan-bajaj

Gemfile

@@ -3,5 +3,5 @@ source 'https://rubygems.org'
 gem 'github-pages', group: :jekyll_plugins
 gem 'rake'
 gem 'html-proofer'
-
+gem 'wdm', '>= 0.1.0'
 gem "webrick", "~> 1.7"

_includes/alumni.html

@@ -1,34 +1,50 @@
 <!-- Begin Team List-->
-<section id="team" class="team">
-    <div class="content-wrapper">
-    	<h4 class="text-left animated hiding appear-animation-trigger" data-animation="fadeInUp" data-delay="0">Alumni</h4>
-        {% for hierarchy in site.data.alumni %}
-        <div class="col-lg-10 col-lg-offset-1 text-center">
-            <h4 class="text-left animated hiding appear-animation-trigger" data-animation="fadeInUp" data-delay="0">Batch of {{ hierarchy.title }}</h4>
-            {% for teamMember in hierarchy.team %}
-            <div class="effect-wrapper col-md-3 col-sm-4 col-xs-12 cols-centered appear-animation">
-                <div class="zoe-effect" data-toggle="modal" data-target="#speakerDetail-{{ teamMember.id }}">
-                    <figure class="waves-effect waves-block waves-light" style="background-image: url({{ site.baseurl | append: '/img/team/alumni/' | append: hierarchy.title | append: '/' | append: teamMember.thumbnailUrl }})">
-                        <div class="overlay solid-overlay"></div>
-                        <figcaption>
-                            <div class="col-md-8 col-xs-8 text-left">
-                                <h2 class="name">{{ teamMember.name }} <span>{{ teamMember.surname }}</span></h2>
-                                <div class="clearfix"></div>
+<div class="accordion" id="accordionExample">
+    <div class="card">
+      <div class="card-header" id="headingOne">
+        <h2 class="mb-0">
+          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+            <h4>Collapsible Group Item #1</h4>
+          </button>
+        </h2>
+      </div>
+  
+      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+        <div class="card-body">
+            <section id="team" class="team">
+                <div class="content-wrapper">
+                    <h4 class="text-left animated hiding appear-animation-trigger" data-animation="fadeInUp" data-delay="0">Alumni</h4>
+                    {% for hierarchy in site.data.alumni %}
+                    <div class="col-lg-10 col-lg-offset-1 text-center">
+                        <h4 class="text-left animated hiding appear-animation-trigger" data-animation="fadeInUp" data-delay="0">Batch of {{ hierarchy.title }}</h4>
+                        {% for teamMember in hierarchy.team %}
+                        <div class="effect-wrapper col-md-3 col-sm-4 col-xs-12 cols-centered appear-animation">
+                            <div class="zoe-effect" data-toggle="modal" data-target="#speakerDetail-{{ teamMember.id }}">
+                                <figure class="waves-effect waves-block waves-light" style="background-image: url({{ site.baseurl | append: '/img/team/alumni/' | append: hierarchy.title | append: '/' | append: teamMember.thumbnailUrl }})">
+                                    <div class="overlay solid-overlay"></div>
+                                    <figcaption>
+                                        <div class="col-md-8 col-xs-8 text-left">
+                                            <h2 class="name">{{ teamMember.name }} <span>{{ teamMember.surname }}</span></h2>
+                                            <div class="clearfix"></div>
+                                        </div>
+                                        {% for social in teamMember.social %}
+                                        <a href="{{ social["link"] }}" target="_blank">
+                                            <svg class="icn icon-{{ social["name"] }}" viewBox="0 0 30 32">
+                                                <use xlink:href="{{ site.baseurl }}/img/sprites/sprites.min.svg#icon-{{ social["name"] }}"></use>
+                                            </svg>
+                                        </a>
+                                        {% endfor %}
+                                    </figcaption>
+                                </figure>
                             </div>
-                            {% for social in teamMember.social %}
-                            <a href="{{ social["link"] }}" target="_blank">
-                                <svg class="icn icon-{{ social["name"] }}" viewBox="0 0 30 32">
-                                    <use xlink:href="{{ site.baseurl }}/img/sprites/sprites.min.svg#icon-{{ social["name"] }}"></use>
-                                </svg>
-                            </a>
-                            {% endfor %}
-                        </figcaption>
-                    </figure>
+                        </div>
+                        {% endfor %}
+                    </div>
+                    {% endfor %}
                 </div>
-            </div>
-            {% endfor %}
+            </section>            
         </div>
-        {% endfor %}
+      </div>
     </div>
-</section>
+  </div>
 <!-- End Team List -->

about-us.html

@@ -11,4 +11,4 @@
 
 {% include team.html %}
 
- {% include alumni.html %}
+{% include alumni.html %}