Google Products Accordion

HTML
<!-- Welcome --> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="well well-sm"> <p class="text-center"> This is a Bootstrap 3 accordion I made that imitates <a href="https://goo.gl/eY8dFj">Google's Product list page</a>. Enjoy! </p> </div> </div> </div> </div> <!-- /Welcome --> <!-- Accordion --> <div class="container" id="apps"> <div class="row"> <div class="col-md-12"> <div class="panel-group" role="tablist" aria-multiselectable="true" id="apps-accordion"> <div class="panel panel-default panel-apps"> <div class="panel-heading" role="tab" data-toggle="collapse" data-target="#apps-accordion .item-1" data-parent="#apps-accordion"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#apps-accordion" aria-expanded="true" href="#apps-accordion .item-1"> <i class="material-icons">keyboard_arrow_down</i>For all </a> </h4> </div> <div class="panel-collapse collapse in item-1" role="tabpanel"> <div class="panel-body text-center"> <div class="row is-flex"> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/ciPRRLX.png" width="60" height="60"> <span>Android Auto</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/qdU5mrV.png" width="60" height="60"> <span>Android Messages</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/Yk5glak.png" width="60" height="60"> <span>Android OS</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/7mfxPqG.png" width="60" height="60"> <span>Android One</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/9EOdRzU.png" width="60" height="60"> <span>Android Pay</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/p62M9e1.png" width="60" height="60"> <span>Android Phones</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/8znwI3F.png" width="60" height="60"> <span>Android Tablets</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/uPLl447.png" width="60" height="60"> <span>Android Wear</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/18VzsBz.png" width="60" height="60"> <span>Calendar</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/tWNgayV.png" width="60" height="60"> <span>Cardboard</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/xoe4PNe.png" width="60" height="60"> <span>Chrome</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/VGi1S3d.png" width="60" height="60"> <span>Chrome Web Store</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/dOb9W0e.png" width="60" height="60"> <span>Chromebook</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/1cB4JVb.png" width="60" height="60"> <span>Chromecast</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/lCzEVuS.png" width="60" height="60"> <span>Contacts</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/laiH0C2.png" width="60" height="60"> <span>Daydream View</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/eLkmR4w.png" width="60" height="60"> <span>Docs</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/q6DLYEN.png" width="60" height="60"> <span>Drawings</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/x4h0kEV.png" width="60" height="60"> <span>Drive</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/54IjjTD.png" width="60" height="60"> <span>Earth</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/6FqrU6G.png" width="60" height="60"> <span>Finance</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/BPnghbV.png" width="60" height="60"> <span>Forms</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/59JryZI.png" width="60" height="60"> <span>Gboard</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/RsWsPy9.png" width="60" height="60"> <span>Gmail</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/StFkoji.png" width="60" height="60"> <span>Google Alerts</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/sAjQueO.png" width="60" height="60"> <span>Google Allo</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/KgLueWP.png" width="60" height="60"> <span>Google Camera</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/up42LU8.png" width="60" height="60"> <span>Google Cast</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/1I8kYOJ.png" width="60" height="60"> <span>Google Classroom</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/2nTTY76.png" width="60" height="60"> <span>Google Cloud Print</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/pPaiGgM.png" width="60" height="60"> <span>Google Duo</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/zGaS3Si.png" width="60" height="60"> <span>Google Expeditions</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/PTF2k4b.png" width="60" height="60"> <span>Google Express</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/h4VdXhL.png" width="60" height="60"> <span>Google Fit</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/Aj6a5Kb.png" width="60" height="60"> <span>Google Flights</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/XJNwIXn.png" width="60" height="60"> <span>Google Fonts</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/LmRb2aT.png" width="60" height="60"> <span>Google Goggles</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/ljEABX1.png" width="60" height="60"> <span>Google Groups</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/QXyJHHG.png" width="60" height="60"> <span>Google Home</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/SbVexoC.png" width="60" height="60"> <span>Google Input Tools</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/n3DLpZF.png" width="60" height="60"> <span>Google One Today</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/VxxaFSH.png" width="60" height="60"> <span>Google Play</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/71tFysa.png" width="60" height="60"> <span>Google Play Apps</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/g6iOGXa.png" width="60" height="60"> <span>Google Play Games</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/xwrf6Wn.png" width="60" height="60"> <span>Google Play Movies & TV</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/8ARtJtg.png" width="60" height="60"> <span>Google Play Music</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/wrAJrEP.png" width="60" height="60"> <span>Google Play Newsstand</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/GiNUG8h.png" width="60" height="60"> <span>Google Store</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/UvFwcQM.png" width="60" height="60"> <span>Google Sync</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/uMgoXOZ.png" width="60" height="60"> <span>Google Wifi</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/G3Fxvw1.png" width="60" height="60"> <span>Google for Education</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/OhdMs7W.png" width="60" height="60"> <span>Google+</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/s4OgOb8.png" width="60" height="60"> <span>Hangouts</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/xJGkdaR.png" width="60" height="60"> <span>Inbox by Gmail</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/JkPYNpX.png" width="60" height="60"> <span>Keep</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/90QIdzD.png" width="60" height="60"> <span>Maps</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/gYR0nDW.png" width="60" height="60"> <span>News</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/3qOLvtA.png" width="60" height="60"> <span>Nexus</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/qKf3NY3.png" width="60" height="60"> <span>OnHub</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/MCPy2xr.png" width="60" height="60"> <span>Photos</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/D7aI1po.png" width="60" height="60"> <span>Pixel</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/5jdISeo.png" width="60" height="60"> <span>Project Fi</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/rM2JLOH.png" width="60" height="60"> <span>Scholar</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/4eGcCAq.png" width="60" height="60"> <span>Search</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/ywwAJtj.png" width="60" height="60"> <span>Sheets</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/IXmWLpj.png" width="60" height="60"> <span>Sites</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/tUrvsCY.png" width="60" height="60"> <span>Slides</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/PuLeYRZ.png" width="60" height="60"> <span>Smartbox</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/KMnsYNc.png" width="60" height="60"> <span>Tango</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/fGiWG8t.png" width="60" height="60"> <span>Tilt Brush</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/jjjSm6I.png" width="60" height="60"> <span>Translate</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/LEJlgDZ.png" width="60" height="60"> <span>Trips</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/hkT7hGU.png" width="60" height="60"> <span>Voice</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/l9AzjlH.png" width="60" height="60"> <span>Waze</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/AhlDnpu.png" width="60" height="60"> <span>YouTube</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/a34YvOh.png" width="60" height="60"> <span>YouTube Gaming</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/HgtzyQq.png" width="60" height="60"> <span>YouTube Kids</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/seFWREX.png" width="60" height="60"> <span>Zagat</span> </a></div> </div> </div> </div> </div> </div> <div class="panel panel-default panel-apps"> <div class="panel-heading" role="tab" data-toggle="collapse" data-target="#apps-accordion .item-2" data-parent="#apps-accordion"> <h4 class="panel-title" data-toggle="collapse"> <a role="button" data-toggle="collapse" data-parent="#apps-accordion" aria-expanded="false" href="#apps-accordion .item-2"> <i class="material-icons">keyboard_arrow_down</i>For business </a> </h4> </div> <div class="panel-collapse collapse item-2" role="tabpanel"> <div class="panel-body"> <div class="row is-flex"> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/gINcsbB.png" width="60" height="60"> <span>Admob</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/rE8vwnt.png" width="60" height="60"> <span>AdSense</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/503SJER.png" width="60" height="60"> <span>AdWords</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/KDlusVM.png" width="60" height="60"> <span>AdWords Express</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/DyY3nCq.png" width="60" height="60"> <span>Analytics</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/jg2TmmU.png" width="60" height="60"> <span>Android</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/ZhOseR9.png" width="60" height="60"> <span>Blogger</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/zEslI9N.png" width="60" height="60"> <span>Chrome</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/23avxvZ.png" width="60" height="60"> <span>DoubleClick by Google</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/X0ZKobt.png" width="60" height="60"> <span>G Suite</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/NMSa6vF.png" width="60" height="60"> <span>Google Cloud Platform</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/uyh87AI.png" width="60" height="60"> <span>Google Domains</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/rXaxFXm.png" width="60" height="60"> <span>Google Enterprise Search</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/LWGlRea.png" width="60" height="60"> <span>Google Maps APIs</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/dpksNjv.png" width="60" height="60"> <span>Google Merchant Center</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/gMg8eMO.png" width="60" height="60"> <span>Google My Business</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/X3iADjP.png" width="60" height="60"> <span>Google Shopping Campaigns</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/76TuTWc.png" width="60" height="60"> <span>Google Street View</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/Wng7mbl.png" width="60" height="60"> <span>Google Surveys</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/Aj3ov04.png" width="60" height="60"> <span>Google Tag Manager</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/SSbJpUr.png" width="60" height="60"> <span>Google Trends</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/doRjpHE.png" width="60" height="60"> <span>Google Trusted Stores</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/MQdkuoe.png" width="60" height="60"> <span>Google Web Designer</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/176yrlB.png" width="60" height="60"> <span>Google+ Brands</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/pu7jkYn.png" width="60" height="60"> <span>Local Inventory Ads</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/oVJTVsO.png" width="60" height="60"> <span>Search Console</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/A7BRu2N.png" width="60" height="60"> <span>Waze Local</span> </a></div> </div> </div> </div> </div> </div> <div class="panel panel-default panel-apps"> <div class="panel-heading" role="tab" data-toggle="collapse" data-target="#apps-accordion .item-3" data-parent="#apps-accordion"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#apps-accordion" aria-expanded="false" href="#apps-accordion .item-3"> <i class="material-icons">keyboard_arrow_down</i>For developers </a> </h4> </div> <div class="panel-collapse collapse item-3" role="tabpanel"> <div class="panel-body"> <div class="row is-flex"> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/MrTByL8.png" width="60" height="60"> <span>App Testing</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/WDBZUp9.png" width="60" height="60"> <span>Cloud Computing</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/rDhgEji.png" width="60" height="60"> <span>Devices</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/ZSZ5XqA.png" width="60" height="60"> <span>Engagement</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/9a5pUc0.png" width="60" height="60"> <span>Game Services</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/mRB25en.png" width="60" height="60"> <span>Growth</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/nlZ2S2J.png" width="60" height="60"> <span>Maps + Location</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/GOYeOMM.png" width="60" height="60"> <span>Messaging + Notifications</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/EaE7QUF.png" width="60" height="60"> <span>Monetization</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/GrsrEbO.png" width="60" height="60"> <span>Monitoring</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/N7ZO5XM.png" width="60" height="60"> <span>Payments</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/CjXxRkV.png" width="60" height="60"> <span>Sign in + Identity</span> </a></div> </div> <div class="col-md-2 col-sm-3 col-xs-4"> <div class="app"><a href="#"> <img src="http://i.imgur.com/hMk449j.png" width="60" height="60"> <span>Storage + Sync</span> </a></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
CSS
body { background-color:#fafafa; } #apps { color:#757575; font:300 normal 16px Roboto, Arial, Helvetica, sans-serif; margin-top:30px; margin-bottom:30px; } @media (min-width:1200px) { #apps.container { width:1200px; } } @media (min-width:1440px) { #apps.container { width:1440px; } } #apps .row.is-flex { display:flex; flex-wrap:wrap; } #apps .row.is-flex > [class*='col-'] { display:flex; flex-direction:column; } #apps .row.is-flex { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } #apps .row.is-flex > [class*='col-'] { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; padding-left:10px; padding-right:10px; } #apps .panel-group .panel + .panel { margin-top:0; border:none; } .panel-apps { border:none; } #apps .panel-title { color:#fff; font-size:22px; font-weight:300; line-height:30px; } #apps .panel-title a:hover, .panel-title a:focus { text-decoration:none; } #apps .panel-title .material-icons { display:inline-flex; vertical-align:middle; margin-right:.5em; transition:transform .3s cubic-bezier(.4,0,.2,1); } .panel-apps > .panel-heading { background-color:#4285F4; background-image:none; border-radius:0; padding:20px 4%; cursor:pointer; border:none; border-bottom:1px solid #247cf3; } .panel-apps > .panel-heading:hover { background-color:#508EF5; } .app { margin:15px auto; } .app a { display:block; } .app a:hover { text-decoration:none; } .app img { display:block; margin:0 auto; } .app span { display:block; padding-top:5px; text-decoration:none; text-align:center; } .app a span { color:#757575; } .app a:hover span { color:#9e9e9e; }
JAVASCRIPT
Expand for more options Login