- Happy Valley SD
- Expanding/Contracting Embed Code
Tips & Tricks
Page Navigation
- Changing a Favicon
- Teacher Section URL for Staff Directory
- Twitter Widget
- Page or Section Navigation
- Expanding/Contracting Embed Code
- Hide content for missing url in custom minibase
- Hiding the Photo Gallery Frame
- Hide search boxes for Staff Directory app
- Can't find the signin button to WCM
- Fix for Staff Directory Search button color
- Search Again button for minibase
- YouTube Codes
- Table App - word wrap code
- Hide Google Calendar sync event details (contact and url)
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.