Expanding/ Contracting C2 Apps

  • Configuring the library-type apps and other apps to expand & contract is a very simple process. Let's take the Link Library app as an example and let us assume you wish to have three (3) Link Library apps on the same page for different 'categories' or 'groups' of websites.  (NOTE:  This process does not work with all apps, just the apps listed below)

     

        First of all, customize your page to have the number of Link Library apps that you want on that page

     

        At the bottom of these apps, insert the Embed Code app so it looks like this:
        Link Library App

     

        Link Library App

     

        Link Library App

     

        Embed Code App


    In the Embed Code App, insert the following code:

    For a Link Library app

    <style>div.link-library {padding: 0px 15px !important}div.link-library .ui-widget-header {cursor: pointer;}div.link-library .ui-widget-header h1 {font-size: 17px}div.link-library .ui-widget-footer {padding: 0px !important}</style><script type="text/javascript">$(document).ready(function() { $("div.link-library .ui-widget-detail").hide(); $("div.link-library .ui-widget-header").click(function() { $(this).next("div.link-library .ui-widget-detail").slideToggle(300); });}); </script>

     


    For a Article Library app

    <style>div.article-library {padding: 0px 15px !important}div.article-library .ui-widget-header {cursor: pointer;}div.article-library .ui-widget-header h1 {font-size: 17px}div.article-library .ui-widget-footer {padding: 0px !important}</style><script type="text/javascript">$(document).ready(function() { $("div.article-library .ui-widget-detail").hide(); $("div.article-library .ui-widget-header").click(function() { $(this).next("div.article-library .ui-widget-detail").slideToggle(300); });}); </script>

     


    For a File Library app

    <style>div.file-library {padding: 0px 15px !important}div.file-library .ui-widget-header {cursor: pointer;}div.file-library .ui-widget-header h1 {font-size: 17px}div.file-library .ui-widget-footer {padding: 0px !important}</style><script type="text/javascript">$(document).ready(function() { $("div.file-library .ui-widget-detail").hide(); $("div.file-library .ui-widget-header").click(function() { $(this).next("div.file-library .ui-widget-detail").slideToggle(300); });}); </script>

     

    For a Headlines & Features app

    <style>div.headlines {padding: 0px 15px !important}div.headlines .ui-widget-header {cursor: pointer;}div.headlines .ui-widget-header h1 {font-size: 17px}div.headlines .ui-widget-footer {padding: 0px !important}</style><script type="text/javascript">$(document).ready(function() { $("div.headlines .ui-widget-detail").hide(); $("div.headlines .ui-widget-header").click(function() { $(this).next("div.headlines .ui-widget-detail").slideToggle(300); });}); </script>

     

    For a Maps & Directions app

    <style>div.maps-directions {padding: 0px 15px !important}div.maps-directions .ui-widget-header {cursor: pointer;}div.maps-directions .ui-widget-header h1 {font-size: 17px}div.maps-directions .ui-widget-footer {padding: 0px !important}</style><script type="text/javascript">$(document).ready(function() { $("div.maps-directions .ui-widget-detail").hide(); $("div.maps-directions .ui-widget-header").click(function() { $(this).next("div.maps-directions .ui-widget-detail").slideToggle(300); });}); </script>

     

    For a Book List app

    <style>div.book-list {padding: 0px 15px !important}div.book-list .ui-widget-header {cursor: pointer;}div.book-list .ui-widget-header h1 {font-size: 17px}div.book-list .ui-widget-footer {padding: 0px !important}</style><script type="text/javascript">$(document).ready(function() { $("div.book-list .ui-widget-detail").hide(); $("div.book-list .ui-widget-header").click(function() { $(this).next("div.book-list .ui-widget-detail").slideToggle(300); });}); </script>


     
    It also works should you decide to have a combination of library-type apps on the same page.
    You only need one embed code per type of library in any page layout where you want to have multiple libraries that expand and contract.

    Ex. Page Layout Contains:
    File Library                Article Library
    File Library                Article Library
    File Library                Article Library
    File Library                Article Library
    Embed Code App       Embed Code App
    (for the file libraries) (for the article libraries)

    OR
    File Library                File Library
    File Library                File Library
    File Library                File Library
    File Library                File Library
    Embed Code App
    (for the file libraries)

    If there was a second embed code app that was also referencing a file library in the second example, then, when you clicked on one file library to expand, it would automatically contract again and not allow you to choose a record within that library.